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

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?

Answer

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>

Advertisement

Answer