ng-repeat array of objects inside array of objects

Question

I am having trouble with ng-repeat for repeating properties of an object when it is inside an array and that array is inside an object which is inside another array of objects like this:

$scope.myJson = [{'id':1,'date':2,'nikola':[{'title':'a', 'name':'b'},{'title':'v', 'name':'b'},{'title':'d', 'name':'b'},{'title':'a', 'name':'b'},{'title':'a', 'name':'b'}]},   
{'id':1,'date':2,'nikola':[{'title':'r', 'name':'b'},{'title':'a', 'name':'b'},{'title':'a', 'name':'b'},{'title':'a', 'name':'b'},{'title':'a', 'name':'b'}]},  
{'id':1,'date':2,'nikola':[{'title':'z', 'name':'b'},{'title':'a', 'name':'b'},{'title':'a', 'name':'b'},{'title':'a', 'name':'b'},{'title':'a', 'name':'b'}]}];


<div ng-repeat='json in myJson'>
  <p>{{json.id}}</p>
  <p>{{json.date}}</p>
  <p>{{json.nikola.title}}</p>
</div>

json.nikola.title is not displaying every title in every nikola array. Thanks for the help.

What have you tried? You have to show what you expect of the result. What should the HTML render to? — Bjørn Sørensen
– Bjørn Sørensen, Commented Mar 8, 2016 at 22:03
I actually did but obviously i didn't post the code the right way. The point is that i have that json and i need to ng-repeat properties inside 'nikola', what i do with the result is not important. — Uros
– Uros, Commented Mar 8, 2016 at 22:09
You should accept the answer of @BjørnSørensen below, it's correct with explanations. — Suicideboy
– Suicideboy, Commented Mar 8, 2016 at 22:23

Bjørn Sørensen · Accepted Answer · 2016-03-08 22:19:05Z

2

The reason you don't get an output is that you try to output an array as a single value. If you want each value in the array, you use ng-repeat on it as well.

When using ng-repeat you iterate over an array. As your first goal is to iterate over the main array with IDs this is done with

<div ng-repeat="item in myJson"></div>

You got this down. Further more you want to iterate over an array on each item. Same as before:

<div ng-repeat="subitem in item.nikola"></div>

There you have it.

<div ng-repeat="item in myJson">
    <div ng-repeat="subitem in item.nikola">
    </div>
</div>

You can then access the properties as you like on each repeater.

See this plunker for a running example on your data.

answered Mar 8, 2016 at 22:19

Bjørn Sørensen

9211 gold badge6 silver badges14 bronze badges

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

Comments

believe me · Accepted Answer · 2016-03-08 22:22:49Z

0

Add another ng-repeat to iterate the nikola object

<div ng-repeat='json in myJson'>
   <p>{{json.id}}</p>
   <p>{{json.date}}</p>
   <div ng-repeat='item in json.nikola'>
      <p>{{item.title}}</p>
   </div>
</div>`

edited Mar 8, 2016 at 22:22

answered Mar 8, 2016 at 22:19

believe me

9081 gold badge5 silver badges24 bronze badges

2 Comments

Suicideboy Over a year ago

Have you even tried before writing that ? You have to access id and date properties of json and property title of item to make it work.

believe me Over a year ago

@Tomisol I was writing it the quickest I could.. ;)

Collectives™ on Stack Overflow

ng-repeat array of objects inside array of objects

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related