Angular create table from objects

Question

From a Rest Api I am getting the following:

{
 "headers": ["h1", "h2"],
 "body": [{"h1": "a1", "h2":"a2"},
          {"h1": "b1", "h2":"b2"},
           ...                   ]
}

Now I would like to transform this one into an (orderable table) with angular. I tried:

<table class="table table-striped">
    <thead>
    <tr>
        <th ng-repeat="header in data.headers">{{ header }}</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="line in data.body">
        <td ng-repeat="(key, val) in line">{{ val | date : "dd.MM.yy" }}</td>

    </tr>
    </tbody>
</table>

Of course it does not work, as objects do not have a key order in javascript. Is there a simple way to sort the line by headers?

Boris Parnikel · Accepted Answer · 2016-03-01 14:29:14Z

3

You can do this very simple:

<tr ng-repeat="line in data.body">
    <td ng-repeat="header in data.headers">{{ line[header] | date : "dd.MM.yy" }}</td>
</tr>

answered Mar 1, 2016 at 14:29

Boris Parnikel

8631 gold badge7 silver badges15 bronze badges

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

1 Comment

Boris Parnikel Over a year ago

@N.V.Prasad No, orderBy sorts by field of iterated objects. But in our case lines have no 'header' field.

Collectives™ on Stack Overflow

Angular create table from objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related