How to show json response values in Angular JS using ng-repeat

Question

I'm trying to show the values of a specific JSON in the right Order. My JSON looks like :

{
"A":[{"id":"21","name":"Andrea"},{"id":"22","name":"Apple"}],
"B":[{"id":"21","name":"Baby"},{"id":"22","name":"Bali"}],
"C":[{"id":"21","name":"Candle"},{"id":"22","name":"Canada"}],
}

How to show values with ng-repeat :

<div ng-repeat="item in items">

</div>

like :

A

Andrea

Apple

B

Baby

Bali

C

Candle

Canada

Similar to: http://stackoverflow.com/questions/15127834/how-can-i-iterate-over-the-keys-value-in-ng-repeat-in-angular — khakiout, Jul 08 '15 at 09:13
Possible duplicate of [How to iterate over the keys and values with ng-repeat in AngularJS?](https://stackoverflow.com/questions/15127834/how-to-iterate-over-the-keys-and-values-with-ng-repeat-in-angularjs) — xIsra, Sep 22 '19 at 12:03

score 5 · Accepted Answer · answered Jul 08 '15 at 09:12

5

Please check working example: http://plnkr.co/edit/lqoQvmXnimWYzqVU0wkg?p=preview

HTML

<div ng-repeat="(key, values) in items">
  {{key}}
  <div ng-repeat="item in values">
    {{item.name}}
  </div>
</div>

answered Jul 08 '15 at 09:12

User2

1,293
8
17

score 1 · Answer 2 · answered Jul 08 '15 at 09:11

1

you can iterate over the object with:

<div ng-repeat="(key, value) in jsonData">
   {{key}}
   <div ng-repeat="item in value">
      <div>{{item.name}}</div>
   </div>
</div>

edit: I see the other guys added jsfiddle so enjoy :)

answered Jul 08 '15 at 09:11

Dima Gimburg

1,376
3
17
35

score 1 · Answer 3 · answered Jul 08 '15 at 09:14

If your data be like this :

$scope.items={
"A":[{"id":"21","name":"Andrea"},{"id":"22","name":"Apple"}],
"B":[{"id":"21","name":"Baby"},{"id":"22","name":"Bali"}],
"C":[{"id":"21","name":"Candle"},{"id":"22","name":"Canada"}],
}

Consider item as map and iterate for (key,value) in map and the value will be associated List. And again iterate for the list in values as -

<div ng-repeat="(key,value) in items">
     {{key}}
     <div ng-repeat="item in value">
       {{item.name}}
     </div>
</div>

Ajay Narain Mathur · Answer 4 · 2015-07-11T02:14:10.920

0

Try this plunker.

You print key of your json too so you should use '(key,value)' in ng-repeat to get value of key too.

code:

<div ng-repeat="(key,value) in data">
   {{key}}
    <div ng-repeat="item in value">
      {{item}}
    </div>
</div>

edited Jul 11 '15 at 02:14

answered Jul 08 '15 at 09:13

Ajay Narain Mathur

5,326
2
20
32

How to show json response values in Angular JS using ng-repeat

4 Answers4