AngularJS ng-repeat through multiple arrays of same JSON object

Question

Can I iterate throught two different arrays of same object in AngularJS 1.6?

What I mean:

JS:

var foo = {
   names: ["Name1", "Name2", "Name3"],
   surnames: ["Surname1", "Surname2", "Surname3"] 
}

In my HTML part I would like to do something like this:

<ul ng-repeat="name in foo.names, surname in foo.surnames">
    <li><span>{{name}}</span> <span>{{surname}}</span></li>
</ul>

The result I'd like to get is:

Name1 Surname1

Name2 Surname2

Name3 Surname3

Is there a way?

In one ng-repeat you can iterate one array. You can use nested ng-repeat . — Arun Sahani
– Arun Sahani, Commented Jul 13, 2017 at 11:55

Arunkumar G · Accepted Answer · 2017-07-13 10:03:07Z

4

It will work.

<ul ng-repeat="name in foo.names">
    <li><span>{{name}}</span> <span>{{foo.surnames[$index]}}</span></li>
</ul>

answered Jul 13, 2017 at 10:03

Arunkumar G

1266 bronze badges

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

Comments

Sachila Ranawaka · Accepted Answer · 2017-07-13 10:02:05Z

1

you can use the first array $index to access the second array elements

<ul ng-repeat="name in foo.names">
    <li><span>{{name}}</span> <span>{{foo.surnames[$index]}}</span></li>
</ul>

answered Jul 13, 2017 at 10:02

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges