How to increment a loop in Vue-CodePudding

I've got a multi-object array and I'd like to have it loop through a particular group of objects.

This is my code so far

 <template>
  <div>
    <h1>My Test App</h1>
    <button v-on:click="getHockeyData">Get Team Data</button>
   <div v-for="hockeyData in hockeyDataList" :key="hockeyData.id" >
     <p>{{ hockeyDataList.teams[0].roster.roster[1].person.fullName }}</p>
    </div>
  </div>
</template>


<script>
import axios from 'axios';

export default {
  name: "Weather",
  data() {
    return {
      hockeyDataList: []
    };
  },
  methods: {
   getHockeyData() {
      axios.get("https://statsapi.web.nhl.com/api/v1/teams/21?expand=team.roster").then(response => (this.hockeyDataList = response.data));
    }
  }
  
};


</script>

I know the loop won't work in it's current state. The portion of my output within the loop that I need to increment is roster[1] - I'm new to Vue so not sure how to use the v- commands to increment that 1 until there are no more instances of it.

Any help or feedback would be greatly appreciated!

CodePudding user response：

<div v-for="team in hockeyDataList.teams" :key="team.id" >
 <p v-for="roster in team.roster.roster :key="roster.id">
   {{ roster.person.fullName }}
 </p>
</div>

It's not necessary, but if you want to, you can get index in a v-for as well:

<div v-for="(team, index) in hockeyDataList.teams" :key="team.id" >
 <p>
   {{ hockeyDataList.teams[index].roster.roster[1].person.fullName }}
 </p>
</div>

CodePudding user response：

v-for increments the index automatically for you. The problem is that the api returns a json and not an array we can iterate on. By looking at the api response, we can see that teams is the array we can iterate on.

<v-for="(team, i) in hockeyDataList.teams" :key="i">

where index automatically increments until the end of list. We can then iterate through the roster.

<v-for="(roster, j) in team.roster.roster" :key="j">

Putting it all together

<div v-for="(team, i) in hockeyDataList.teams" :key="i">
  <div v-for="(roster, j) in team.roster.roster" :key="j">
    <p>{{ hockeyDataList.teams[i].roster.roster[j].person.fullName }}</p>
  </div>
</div>

CodePudding user response：

Just loop over the others, really you want to start from teams as that's the way the JSON is structured

Example using various parts of the JSON, view the file for others.

<div v-for="team in hockeyDataList.teams" :key="team.id">
  <h1>{{ team.name }}</h1>
  <div>{{ team.venue.name }}, {{ team.venue.city }}</div>
  <div>Created in: {{ team.firstYearOfPlay }}</div>
  <div>Division: {{ team.division.name }} - Conference: {{ team.conference.name }}</div>

  <h2>Roster</h2>
  <div v-for="player in team.roster.roster" :key="team.id   '-'   player.person.id">
    <h3>{{ player.person.fullName }}</h3>
    <div>
      Number: {{ player.jerseyNumber }} - Position: {{ player.position.name }} {{ player.position.type }}
    </div>
  </div>
</div>