How to loop through the 'key' value of an object with AngularJS?

Question

I have the following data and HTML template (and other code in app.js obviously). The code in my "tbody" works perfectly, and displays a table like this:

current output

--------------------
| AAPL | 127 | 128 |
--------------------
| GOOG | 523 | 522 |
--------------------
| TWTR |  35 |  36 |
--------------------

Now I'm trying to loop through the 'keys' of the first object and display them in a 'thead' like so:

desired output

--------------------
| Name | jan | feb |
--------------------
| AAPL | 127 | 128 |
--------------------
| GOOG | 523 | 522 |
--------------------
| TWTR |  35 |  36 |
--------------------

data

$scope.data = [
{  
    "name": "AAPL",
    "jan": "127",
    "feb": "128"
},
{
    "name": "GOOG",
    "jan": "523",
    "feb": "522"
},
{
    "name": "TWTR",
    "jan": "35",
    "feb": "36"
}]

html

<table>
    <thead>
        <tr>
            <td ng-repeat="">{{}}</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="object in data">
            <td ng-repeat="(a,b) in object">{{b}}</td>
        </tr>
    </tbody>
</table>

It has been pointed out that this question is a duplicate of another one, although, the other one is in plain JS, this one uses AngularJS.

possible duplicate of [best way to get the key of a key/value javascript object](http://stackoverflow.com/questions/6268679/best-way-to-get-the-key-of-a-key-value-javascript-object) — JNF, Jul 05 '15 at 14:10
@murid: your code works, check if you link to angular library, or right linking ng-app, ng-controller... — hungndv, Jul 05 '15 at 14:12
That is plain JS, I need something in Angular, similar to "ng-repeat", that doesn't repeat though, only spits out 1 value. — trs, Jul 05 '15 at 14:12
possible duplicate of [How can I iterate over the keys, value in ng-repeat in angular](http://stackoverflow.com/questions/15127834/how-can-i-iterate-over-the-keys-value-in-ng-repeat-in-angular) — callmekatootie, Jul 05 '15 at 14:26

New Alexandria · Answer 1 · 2015-07-05T14:23:39.540

1

If you use underscoreJS (which is a very common and competent convenience library) then you can get the keys of the first object like this:

_.keys(data[0])

This presume that all elements in the array have the same keys & structure. Looks like it, so you should be safe.

After including UnderscoreJS in your app, then you would call it from the template in the bracketed expression:

 <td ng-repeat="">{{ _.keys(data[0])}}</td>

Pure ES5 solution

If your hard-up against a library, and you can stomach ES5, then you can use

Object.keys(data[0])
<td ng-repeat="">{{ Object.keys(data[0]) }}</td>

edited Jul 05 '15 at 14:23

answered Jul 05 '15 at 14:12

New Alexandria

6,951
4
57
77

Isn't there something in Angular? There must be… – trs Jul 05 '15 at 14:13
Sure, just have others have answered, but which syntax do you think reads more cleanly? As well, with this strategy, you can put this extraction of the keys anywhere in your code (e.g. the controller) and still have the same clean code. I recommend reading more on UnderscoreJS; its functional style is influenced by great modern languages like Ruby, Lambda, and cousins. – New Alexandria Jul 05 '15 at 14:14
@murid similarly, you can use the answer in the "possible duplicate" question that is linked in the comments; but then, too, you have something that reads in an awkward way. At least using `Object.keys(data[0])` would be ES5 and could go where needed, too. – New Alexandria Jul 05 '15 at 14:21

score 1 · Accepted Answer · answered Jul 05 '15 at 14:13

1

<td ng-if="data.length" ng-repeat="(a,b) in data[0]">{{a}}</td>

You just have to consider that key values always appear in the same order or the table will show values in the wrong order.

answered Jul 05 '15 at 14:13

Michael

3,085
1
17
15

Yep! We have a winner! – trs Jul 05 '15 at 14:23

score 0 · Answer 3 · answered Jul 05 '15 at 14:13

You use use Angular's (key, value) syntax. However, I don't think this will work in your case because the order of iteration is random.

I think your best best is either to hardcode the keys in a $scope.headings variable or to update the format of your data (if you have control over how it is generated) so that the order of keys is specified.

score 0 · Answer 4 · answered Jul 05 '15 at 14:17

@murid, Do you need this:

In script tag of head:

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.data = [{
        "name": "AAPL",
            "jan": "127",
            "feb": "128"
    }, {
        "name": "GOOG",
            "jan": "523",
            "feb": "522"
    }, {
        "name": "TWTR",
            "jan": "35",
            "feb": "36"
    }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <table>
        <thead>
            <tr>
                <td ng-repeat="">{{}}</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="object in data">
                <td ng-repeat="(a,b) in object">{{b}}</td>
            </tr>
        </tbody>
    </table>
</div>

Hope this help.

How to loop through the 'key' value of an object with AngularJS?

4 Answers4

Pure ES5 solution