CODEWITHSUNDEEP
javascriptangularjs
user6002037
user6002037

Reputation:

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>

Upvotes: 1

Views: 685

Answers (1)

devqon
devqon

Reputation: 13997

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

Upvotes: 3

Related Questions