phantom phantom - 3 months ago 16
Javascript Question

ng-repeat through object with value as an array angular

I have an object with key value pairs that looks like this. You will see that the key has an array as its value.

$scope.testObj = {

"London":[
{"id":1,"city":"London","country":"GB","name":"Test1"},
{"id":4,"city":"London","country":"GB","name":"Test2"}
],

"Los Angeles":[
{"id":8,"city":"LA","country":"US","name":"Test3"}
]

}


I want to display the name next to the city in the front end using angular. To do this I have tried many approaches, and used track by $index, but cannot figure out how to get this working.

<div ng-repeat="(key, val) in jobsByCity track by $index">
{{key}}:{{val[$index].name}}
</div>


I have looked at this approach too, nesting ng-repeat

<div ng-repeat="(key, val) in testCity">
{{key}}
<div ng-repeat="test in val[$index].name">
{{test}}
</div>
</div>

Answer

Just use another ng-repeat to iterate over the value:

<div ng-repeat="(key, val) in jobsByCity">
    <div ng-repeat="subValue in val track by $index">
        {{key}}:{{subValue.name}}
    </div>
</div>

Also note that your Los Angeles property needs to be in quotes, otherwise it isn't valid javascript.

See this jsfiddle