1

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>
Improve this question
4
  • I guess you have to use nested ng-repeats Commented Aug 8, 2016 at 14:48
  • @k102 i think you are probably right, i have attempted this above. please see updated question Commented Aug 8, 2016 at 14:51
  • 1
    London and Los Angeles also need quotes. Commented Aug 8, 2016 at 14:54
  • @Rob apologies, they do, just for the purpose of the question I forgot to add them Commented Aug 8, 2016 at 14:58

1 Answer 1

Reset to default
3

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

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

Comments