how to properly format a v-for loop for multi-level array-CodePudding

I'm learning how the v-for loops work in Vue. Really liking the idea that I can run the loop directly in my template HTML but unsure how to properly use the v-for loop to delve into a multi level array.

I have variable called playerDataList it contains some JSON data. A sample of which is below

         "stats" : [ {
            "type" : {
            "displayName" : "yearByYear",
            "gameType" : null
            },
            "splits" : [ {
            "season" : "20052006",
            "stat" : {
                "assists" : 43,
                "goals" : 49,
                "pim" : 82,
                "games" : 62,
                "penaltyMinutes" : "82",
                "faceOffPct" : 0.0,
                "points" : 92
            },
            "team" : {
                "name" : "Lon. Jr. Knights",
                "link" : "/api/v1/teams/null"
            },
            "league" : {
                "name" : "Minor-ON",
                "link" : "/api/v1/league/null"
            },
            "sequenceNumber" : 1
            }, {
            "season" : "20062007",
            "stat" : {
                "assists" : 15,
                "goals" : 7,
                "pim" : 30,
                "games" : 62,
                "powerPlayGoals" : 0,
                "penaltyMinutes" : "30",
                "faceOffPct" : 0.0,
                "shortHandedGoals" : 0,
                "plusMinus" : 11,
                "points" : 22
            },
            "team" : {
                "id" : 1874,
                "name" : "Kitchener",
                "link" : "/api/v1/teams/1874"
            },
            "league" : {
                "id" : 141,
                "name" : "OHL",
                "link" : "/api/v1/league/141"
            },
            "sequenceNumber" : 1
            }, {
            "season" : "20072008",
            "stat" : {
                "assists" : 40,
                "goals" : 25,
                "pim" : 57,
                "games" : 68,
                "powerPlayGoals" : 10,
                "penaltyMinutes" : "57",
                "shortHandedGoals" : 0,
                "plusMinus" : 9,
                "points" : 65
            },
            "team" : {
                "id" : 1874,
                "name" : "Kitchener",
                "link" : "/api/v1/teams/1874"
            },
            "league" : {
                "id" : 141,
                "name" : "OHL",
                "link" : "/api/v1/league/141"
            },
            "sequenceNumber" : 1
            }
        }]

I've got this code so far, and it works to display my content, but it's only pulling me the first instance. It's not actually looping and giving me each occurrence.

         <div class="player-stats-card-inner">
            <p class="close" v-on:click='showPlayers = !showPlayers'>Close</p>
            <table>
              <th>
                <td>Goals</td>
                <td>Assists</td>
              </th>

              <!-- Loop through the JSON data -->
              <tr v-for="stats in playerDataList.stats" :key="stats.id">
                <td> 
                  {{stats.splits[0].stat.goals}}
                </td>
                <td>
                  {{stats.splits[0].stat.assists}}
                </td>
              </tr>
            </table>            
          </div>

Is there anything I could do differently to get this properly looping?

CodePudding user response：

Since there are 2 arrays to be iterated over, you need 2 v-for statements. Since you don't want 2 sets of <tr> elements, we use <template> which will not be rendered in the resulting HTML:

<!-- Loop through the JSON data -->
<template v-for="(stats, stats_index) in playerDataList.stats" :key="stats_index">
  <tr v-for="(split, split_index) in stats.splits :key="split_index">
    <td> 
      {{split.stat.goals}}
    </td>
    <td>
      {{split.stat.assists}}
    </td>
  </tr>
</template>

However since you are now displaying multiple goals and assists, you may need another 'level' in your table to identify which stat each one comes from.

CodePudding user response：

You need to loop the inner properties of stat. It is not an array.

<tr v-for="stats in playerDataList.stats" :key="stats.id">
  <td v-for='(value, name) of stats.splits[0].stat'>
     {{name}} : {{value}}
  </td>
</tr>