Crericulum and field names

[irl]

Grid build on JSON. Something like that.

<tr ng-repeat="person in people">
    <td>[{{$index + 1}}]  {{person.id}}</td>
    <td>{{person.firstName}}</td>
    <td>{{person.lastName}}</td>
</tr>

The question is: in this code, I refer directly to the collection fields (person.firstName). What if the name of the i-field is unknown? Is it possible to turn like person.fields[i]? Is there such a syntax in the angloular?

The challenge can be further complicated: the number of fields unknown (i.e. the number of td tgs required to generate dynamically)

UPD

JSON: [
    {"id": "1",    "firstName": "Peter", "lastName": "Jhons"},
    {"id": "2",    "firstName": "Marcus", "lastName": "Smith"},
    {"id": "3",    "firstName": "Grotter", "lastName": "Changer"}
]

shall be obtained:

<table>
  <tr>
    <th>id </th> <th>firstName </th> <th>lastName </th>
  </tr>
  <tr>
     <td>1<td> <td>‌​Peter</td><td>Jhons </td>
  </tr> 
  <tr>
     <td>2<td> <td>‌​Marcus</td><td>Smith </td>
  </tr> 
  <tr>
     <td>1<td> <td>‌​Grotter</td><td>Changer </td>
  </tr> 
 </table>

[baileigh]

https://docs.angularjs.org/api/ng/directive/ngRepeat Works with both masses and objects

In the case of a mass, the expression can look like that.

variable in expression

where variable - is the meaning of a specific element of the mass.

In the case of objects

(key, value) in expression

where key - that's the name of the field. value - it's the meaning of the field.

angular.module('app', [])
  .controller('ctrl', function() {
    this.people = [{
      id: 1,
      lastName: 'Иванов'
    }, {
      id: 2,
      lastName: 'Петров',
      firstName: 'Петр'
    }, {
      id: 3,
      lastName: 'Кузнецов',
      firstName: 'Кузнец',
      middleName: 'Кузнецович'
    }];
});

.people {

background-color: yellow;

border: 1px solid black;

display: flex;

justify-content: flex-start;

}

.id {

width: 10%

}

.lastName {

background-color: red;

width: 25%

}

.firstName {

background-color: green;

width: 25%

}

.middleName {

background-color: blue;

color:yellow;

flex-grow:1;

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>

<div ng-app="app" ng-controller="ctrl as c">

<div class="people" ng-repeat="person in c.people">

<div class="{{k}}" ng-repeat="(k,v) in person">{{k}} - {{v}}</div>

</div>

</div>

_{where there may be a different number of cells on each line, it is likely that a table should not be used. The same Number of cells in each line}

Updating

If a separate line needs to remove the names of the fields, it's easier to keep them in a separate variable, which is then used.

angular.module('app', [])

.controller('ctrl', function() {

this.people = [{

"id": "1",

"firstName": "Peter",

"lastName": "Jhons"

}, {

"id": "2",

"firstName": "Marcus",

"lastName": "Smith"

}, {

"id": "3",

"firstName": "Grotter",

"lastName": "Changer"

}];

this.fields = Object.keys(this.people[0]); //получаем ключи из первого объекта

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>

<div ng-app="app" ng-controller="ctrl as c">

<table>

<tr>

<th ng-repeat="field in c.fields">{{field}}</th>

</tr>

<tr class="people" ng-repeat="person in c.people">

<td ng-repeat="field in c.fields">{{person[field]}}</td>

</tr>

</table>

</div>