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

Possible duplicate of How to iterate over the keys and values with ng-repeat in AngularJS? — xIsra
– xIsra, Commented Sep 22, 2019 at 12:03

User2 · Accepted Answer · 2015-07-08 09:12:37Z

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 8, 2015 at 9:12

User2

1,3038 silver badges17 bronze badges

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

Comments

Dima Gimburg · Accepted Answer · 2015-07-08 09:11:58Z

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 8, 2015 at 9:11

Dima Gimburg

1,4663 gold badges20 silver badges39 bronze badges

Comments

Anita · Accepted Answer · 2015-07-08 09:14:07Z

1

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>

answered Jul 8, 2015 at 9:14

Anita

2,4102 gold badges21 silver badges30 bronze badges

Comments

Ajay Narain Mathur · Accepted Answer · 2015-07-11 02:14:10Z

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, 2015 at 2:14

answered Jul 8, 2015 at 9:13

Ajay Narain Mathur

5,5063 gold badges24 silver badges34 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related