如何使用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.

Answer 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>

Answer 2

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

您只需要考虑键值始终以相同的顺序出现，否则表将以错误的顺序显示值。

Answer 3

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.

Answer 4

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