Using ng-repeat on an array within an array (AngularJS)

Question

I have an array called allSquads. It contains a series of objects which each contain a property called squad. I want to repeat through the contents of this squad array on every object in the allSquads array.

If I ng-repeat through allSquads[0].squad it works fine on that single array.

However, I want to continue repeating, like so:

allSquads[0].squad
allSquads[1].squad
allSquads[2].squad

etc.

My (incorrect) solution currently looks like this:

<div ng-repeat="player in allSquads[$index].squad">...</div>

I assumed $index in this case would represent the incrementally increasing integer, but it's not working. Can anyone help?

Thanks in advance...

Bryan · Accepted Answer · 2016-03-04 19:20:20Z

0

I think what you would want to do instead is grab the value on the outer loop, and loop on the property of the parent value. Something along the lines of this.

<div ng-repeat="squad in allSquads">
    <div ng-repeat="player in squad.players">
        {{ player }}
    </div>
</div>

Is there any reason why you need to directly access the offset of 0, 1, 2 etc?

answered Mar 4, 2016 at 19:20

Bryan

6,7522 gold badges19 silver badges21 bronze badges

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

2 Comments

Paulos3000 Over a year ago

There is actually in this case. I'm running the repeat on a 'card', and I have very specific CSS set up for the card. Creating an extra div as an outer loop messes up the CSS, and I can't seem to find a solution to this.

Bryan Over a year ago

Ok, so in your code, instead of using $index, try replacing that with $parent.$index, does that work?

Community · Accepted Answer · 2017-05-23 11:50:30Z

0

Please look at this answer for a nested ng-repeat. This is how it would look like for you

<div ng-repeat="squad in allSquads">
   <div ng-repeat="player in squad">
       {{player}}
   </div>
</div>

EDIT

if you dont want to use nested loop, one way to go about it is making the 2d array into a 1d array similar to this example then iterating through that, after each concat push split point to show the next squad has started. so ['p1','p2',';;','p3',...] and ";;" would mark the split

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Mar 4, 2016 at 19:22

Zaid Qureshi

1,2331 gold badge10 silver badges15 bronze badges

1 Comment

Paulos3000 Over a year ago

Please see comment above.

Collectives™ on Stack Overflow

Using ng-repeat on an array within an array (AngularJS)

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related