Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

I am trying to use ng-repeat over this array of array of objects, but I am unable to get to display the correct name-value pairs.

var names = [
[{name: "Name 1", age: 25}, {name: "Name 2", age: 20}],
[{name: "Name 3", age: 50}, {name: "Name 4", age: 40}],
[{name: "Name 5", age: 20}, {name: "Name 6", age: 40}]
];

This works to display the entire array of array of objects:

<p ng-repeat="name in names"></p>

But the following to display the name doesn't:

<p ng-repeat="name in names">
    <p ng-repeat="n in name">
        {{n.name}}
    </p>
</p>

I know I am for sure missing something simple.

share|improve this question
    
this should work, can you create a plunker – Tarun Dugar Sep 3 at 13:11
up vote 1 down vote accepted

Seem like nested p tag causes ng-repeat messes up beginning/ending tag

If you change the inside p tag to span or div, it works:

<p ng-repeat="name in names">        
    <span ng-repeat="n in name">
        {{n.name}}
    </span>
</p>
share|improve this answer
    
Thanks a lot! This works. – Douglas Sep 3 at 13:24

If you can change your multi array to use a array of objects with an array of items like below:

var names = [
{items:[{name: "Name 1", age: 25}, {name: "Name 2", age: 20}]},
{items:[{name: "Name 3", age: 50}, {name: "Name 4", age: 40}]},
{items:[{name: "Name 5", age: 20}, {name: "Name 6", age: 40}]}
];

<p ng-repeat="name in names">
    <p ng-repeat="n in name.items">
        {{n.name}}
    </p>
</p>
share|improve this answer
    
But i fail to understand why his code does not work? – Asad Palekar Sep 3 at 13:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.