CODEWITHSUNDEEP
javascripthtmlangularjsjson
pankaj
pankaj

Reputation: 1060

How to iterate json collection using ng repeat angularjs

My service gives below json result

 {"categories":[{"category_id":"20","name":"Desktops"},  {"category_id":"18","name":"Laptops &amp},{"category_id":"25","name":"Components"},
{"category_id":"57","name":"Tablets"},
{"category_id":"17","name":"Software"},
{"category_id":"24","name":"Phones} ]}

this is my html code:

    <tr ng-repeat="menu in menuitems">
    <td>
        {{menu.name}}
    </td>

in controller I fill $scope.menuitems with the json result

I am not able to render the list of names in html. If I write {{menu[0].name}} I do get one record.What am i doing wrong that I am unable to iterate over the json collection.

Upvotes: 0

Views: 115

Answers (3)

Vikash Kumar
Vikash Kumar

Reputation: 1718

It is inside an object. So, you must use,

 <tr ng-repeat="menu in menuitems.categories">
<td>
    {{menu.name}}
</td>

Upvotes: 1

Prateek Gupta
Prateek Gupta

Reputation: 538

ng-repeat directive works over an array.

So, in your case menuitems is the variable where you store the response json object.

Your json's structure shows that it contains an array categories of objects.

Therefore, for ng-repeat to work, you need to pass in menuitems.categories to it.

Expression:

<tr ng-repeat="menu in menuitems.categories">
<td>
    {{menu.name}}
</td>

Upvotes: 1

Alexey Kopievskiy
Alexey Kopievskiy

Reputation: 21

You should iterate all objects and track them I dont know about your controller but try add this line of code

ng-repeat="menu in menuitems track by $index

Upvotes: 0

Related Questions