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 — JNF
– JNF, Commented Jul 5, 2015 at 14:10
@murid: your code works, check if you link to angular library, or right linking ng-app, ng-controller... — hungndv
– hungndv, Commented Jul 5, 2015 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
– trs, Commented Jul 5, 2015 at 14:12
possible duplicate of How can I iterate over the keys, value in ng-repeat in angular — callmekatootie
– callmekatootie, Commented Jul 5, 2015 at 14:26

Michael · Accepted Answer · 2015-07-05 14:13:58Z

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 5, 2015 at 14:13

Michael

3,1141 gold badge19 silver badges17 bronze badges

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

1 Comment

trs Over a year ago

Yep! We have a winner!

New Alexandria · Accepted Answer · 2015-07-05 14:23:39Z

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 5, 2015 at 14:23

answered Jul 5, 2015 at 14:12

New Alexandria

7,3366 gold badges62 silver badges83 bronze badges

3 Comments

trs Over a year ago

Isn't there something in Angular? There must be…

New Alexandria Over a year ago

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 Over a year ago

@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.

Matthew King · Accepted Answer · 2015-07-05 14:13:54Z

0

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.

answered Jul 5, 2015 at 14:13

Matthew King

1,3627 silver badges13 bronze badges

Comments

hungndv · Accepted Answer · 2015-07-05 14:17:11Z

@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.

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Pure ES5 solution

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Pure ES5 solution

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related