How can I use AngularJS 1 to create table rows with the attributes of an array of objects?

Question

So far I've only found examples that put the objects in the rows (1)(2)(3), but I need to put the objects in the columns and their attributes in the rows.

Example of JSON:

[
  {
    name: 'peanut butter',
    price: 0.99
  }
  {
    name: 'strawberry jelly',
    price: 0.99
  }
  {
    name: 'white bread',
    price: 2.99
  }
]

Example of desired table:

I guess you need to first check for all available attributes you got, and create a list based of this. Then do an ng-repeat on this list for the table-rows. Inside this do a second ng-repeat for the objects in the columns. <tr ng-repeat="attr in attributes"><td>{{attr.name}}</td><td ng-repeat="obj in objList"></td></tr> - if you don't need a dynamic version, do like Konrad suggested in his answer, with a hardcoded list of rows. — Tobi
– Tobi, Commented Dec 19, 2016 at 13:54
I'll try that when I need to build a reusable directive. Thanks for the tip! — Friso
– Friso, Commented Dec 19, 2016 at 14:39

Mistalis · Accepted Answer · 2016-12-19 13:55:21Z

1

I think you want something like this.

Angular template:

<table>
  <tr>
    <th>Name</th>
    <th ng-repeat="item in yourList">{{ item.name }}</th> 
  </tr>
  <tr>
    <td>Price</td>
    <td ng-repeat="item in yourList">{{ item.price }}</td> 
  </tr>
</table>

edited Dec 19, 2016 at 13:55

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

answered Dec 19, 2016 at 13:53

Konrad Klimczak

1,5322 gold badges22 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I use AngularJS 1 to create table rows with the attributes of an array of objects?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related