CODEWITHSUNDEEP
javascriptjsonangularjs
Stranger B.
Stranger B.

Reputation: 9374

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

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

Upvotes: 0

Views: 857

Answers (4)

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

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>

Upvotes: 0

Anita
Anita

Reputation: 2400

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>

Upvotes: 1

User2
User2

Reputation: 1293

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>

Upvotes: 5

Dima Gimburg
Dima Gimburg

Reputation: 1466

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 :)

Upvotes: 1

Related Questions