gelito gelito - 9 days ago 7
AngularJS Question

How to apply ng-repeat for such structure

I would like to retrieve a collection of items and then display in the UI properties listed under those. The problem is that the JSON I am receiving from one of the services is causing problems:

Instead of a structure which I would normally expect, i.e.

"items": [
{
"field1": "value1",
"field2": "value2",
"id":"ABCDEF1234"
},
{
"field1": "value1",
"field2": "value2",
"id":"XYZ12345"
}
]


I am receiving:

"items": [
{
"ABCDEF1234": {
"field1": "value1",
"field2": "value2",
"id":"ABCDEF1234"

}
},
{
"XYZ12345": {
"field1": "value1",
"field2": "value2",
"id":"XYZ12345"
}
}
]


Normally I would assign 'items' to $scope.items and then would use ng-repeat like this:

<div ng-repeat="item in items">
<ul>
<li>{{item.id}}</li>
<li>Field1 - {{item.field1}}</li>
<li></li>Field2 - {{item.field2}}</li>
</ul>
</div>


But in this case each item is represented by dynamic id which apart from being displayed as one of the fields is also used as a key of the object. How should I iterate through such collection using ng-repeat to display something like this:

ABCDEF1234

field1 - value1

field2 - value2

XYZ12345

field1 - value1

field2 - value2

Thank you in advance for your help.

Answer
<div ng-repeat="item in items">
    <div ng-repeat="(itemKey, itemValue) in item">
        <h2>{{ itemKey }}</h2>
        <ul ng-repeat="(key, value) in itemValue" ng-if="key !== 'id'">
            <li>{{ key }} - {{ value }}</li>
        </ul>
    </div>
</div>