Accessing an array property on every object in an array, with ng-repeat

Question

I've spent ages trying to solve this, and I can't...

I have an array: clubData.
In that array is a series of objects, which represent individual football clubs.
In each club object, is an array assigned to the property squad.

Here's a sample of clubData:

[{
        "league": "0",
        "id": "0",
        "name": "AFC Bournemouth",
        "codeName": "afc-bournemouth",
        "nickName": "Cherries",
        "dateFounded": "1899",
        "stadium": "Dean Court",
        "manager": "Eddie Howe",
        "squad": 

        [               
            {"clubCode": "afc-bournemouth",
                "firstName": "Artur",
                "lastName": "Boruc",
                "nationality": "pl",
                "country": "Poland",
                "position": "gk",
                "shirtNumber": "1",
                "age": "36"},

            {"clubCode": "afc-bournemouth",
                "firstName": "Glenn",
                "lastName": "Murray",
                "nationality": "gb-eng",
                "country": "England",
                "position": "fw",
                "shirtNumber": "27",
                "age": "32"}
            ] 

    }, {
        "league": "0",
        "id": "1",
        "name": "Arsenal",
        "codeName": "arsenal",
        "nickName": "Gunners",
        "dateFounded": "1886",
        "stadium": "Emirates Stadium",
        "manager": "Arsène Wenger",
        "squad": [ etc... ]
    }
]

I want to run an ng-repeat on an md-card (Angular Material directive), so every object (player) in every squad is repeated as a card.

My current method:

I used an outer and inner div with two separate ng-repeats. The issue with this is it necessarily repeats the outer div, which causes a 'break' at the end of every outer div repeat, when I just want the inner div repeated as individual units.

My HTML currently looks like this:

<span ng-repeat="item in clubData" layout="row" layout-wrap>

    <md-card ng-repeat="player in item.squad" layout="row" layout-wrap>

        <md-card-header>
            <md-card-avatar>
                <div class="clubavatar club-icon-{{player.clubCode}}"></div>
            </md-card-avatar>
            <md-card-header-text>
                <span class="md-title">{{player.firstName + " " + player.lastName}}</span>
                <span class="md-subhead"><span class="flag-icon flag-icon-{{player.nationality}} nationid  md-whiteframe-1dp"></span>{{player.country}}</span>
            </md-card-header-text>
        </md-card-header>

    </md-card>

</span>

My attempted (and failed) solution:

Ideally, I want to come up with an expression in ng-repeat that will iterate through the elements but only print the squad arrays.

I thought something like this might work (but it doesn't):

<md-card ng-repeat="player in clubData[$index].squad">{{player.name}}</md-card>

Logically (to me) that would print out...

<md-card ng-repeat="player in clubData[0].squad">{{player.name}}</md-card>
<md-card ng-repeat="player in clubData[1].squad">{{player.name}}</md-card>
<md-card ng-repeat="player in clubData[2].squad">{{player.name}}</md-card>

Perhaps I'm misusing $index?

If there's something I'm missing, or an alternative working solution, would really appreciate someone's help.

Thanks in advance.

Thanks for the update. I've done some research on reduce() but it confuses the hell out of me... any chance you could explain what you've done in this example? ie. break it down a bit? :/ — Paulos3000
– Paulos3000, Commented Mar 5, 2016 at 9:34
Sure, I'll update my answer and provide you alternate fiddle for your understanding. — Dave Amit
– Dave Amit, Commented Mar 5, 2016 at 9:48
Thanks - definitely a lot clearer. However, when I implement it in my controller it crashes my app, the console reads TypeError: Cannot read property 'forEach' of undefined. 'Undefined' in this instance being clubData. I checked the clubData array though and it's fine, I called in it in an expression and it printed the whole thing. Do you know why this is not working? — Paulos3000
– Paulos3000, Commented Mar 5, 2016 at 10:14

Dave Amit · Accepted Answer · 2016-03-05 10:09:24Z

Are you looking for something like this?

Inside your controller

 $scope.players = clubData.reduce(function(a,c){
                      return a.concat(c.squad);
                  },[]);

Using forEach

 $scope.players = [];

  $scope.clubData.forEach(function(c) {
     $scope.players = $scope.players.concat(c.squad);
  });

and on view:

<md-card ng-repeat="player in players">{{player.name}}</md-card>

Response to your jsfiddle: https://jsfiddle.net/Lt7aP/2342/

Solution using forEach: https://jsfiddle.net/Lt7aP/2344/

Explanation - reduce

reduce is higher order function, very common with functional programming. it takes following form ...

es6 (or you can use babel for support):

//Will return final value of accumulator!
<array>.reduce(function(accumulator,current){
   //accumulator: accumulated result for each iteration
   //current: current item for given iteration

   //accumulator is empty array or array of players
   //we just concat current's squad array 
   var mergedPlayers = accumulator.concat(current.squad);
   //This return will set accumulator to returned value
   //for next iteration.
   return mergedPlayers;
},
[]  //Default accumulator empty array.
);

you can also use lodash, slight syntax change

_.reduce(<array>,function(accumulator,current){
 /* your awesome code goes here*/
},[]);

Hope this helps!

Collectives™ on Stack Overflow

Accessing an array property on every object in an array, with ng-repeat

My current method:

My attempted (and failed) solution:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My current method:

My attempted (and failed) solution:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related