Looping over an array of objects on Vuejs template

Question

I have the following JSON:

{
  "games": [
    {
      "id": 1,
      "init_date": "2020-02-11T07:47:33.627+0000",
      "players_in_game": [
        {
          "id": 1,
          "player": {
            "id": 1,
            "player": "Jack Bauer",
            "email": "[email protected]"
          }
        },
        {
          "id": 2,
          "player": {
            "id": 2,
            "player": "Chloe O'Brian",
            "email": "[email protected]"
          }
        }
      ]
    },
    {
      "id": 2,
      "init_date": "2020-02-11T08:47:33.627+0000",
      "players_in_game": [
        {
          "id": 3,
          "player": {
            "id": 1,
            "player": "Rome Jones",
            "email": "[email protected]"
          }
        },
        {
          "id": 4,
          "player": {
            "id": 2,
            "player": "Ludacris",
            "email": "[email protected]"
          }
        }
      ]
    },
  ]
}

And for every 'players-in game' I want to show one Player VS the other, let's say:

**PLayer 1   VS    PLayer 2**
Jack Bauer         Chloe O'Brian
Rome Jones         Ludacris

But can't find the way of doing it properly. Here the code I put:

<tr v-for="(general, index) in getGamesAll.games" v-bind:key="index">
  <td>Game {{general.id}}</td>
  <td v-for="(gamePlayer, j) in general" :key="j">

    {{general.players_in_game.player.player}}
  </td>
  <td>vs</td>
   <td v-for="(gamePlayer, j) in general" :key="j">
     {{general.players_in_game.player.player}}
  </td>
</tr>

I already know this is wrong, because I'm looping over the same players-in_game reaching to player, but neither of both cases specify which player are inside the object I'm talking about. How could this be accomplished?

Seems to me like your iterating your 2nd v-for on the wrong object, looks like you should iterate over general.players_id_game — ZimGil
– ZimGil, Commented Feb 11, 2020 at 17:10
that 's the thing players in game has both players included so how could i iterate once to display one and the a second time to display the second one , having in mind players in game is an array of object i do pretend to rip inside a table — Enrique GF
– Enrique GF, Commented Feb 11, 2020 at 17:14
You can <td v-for="(gamePlayer, j) in general.players_in_game" :key="j"> — ZimGil
– ZimGil, Commented Feb 11, 2020 at 17:28

Kyle · Accepted Answer · 2020-02-11 17:25:23Z

The main thing was to target the correct node when looping.

In the example, 'general' represents one of the items in 'getGamesAll'.

Once we are in that instance of 'general' we want to do our second loop off of the array at node 'players_in_game'.

Then, instead of looping over the same object twice to represent each row, we would try and figure a way to do it with a single loop. In the snippet, I'm just using the single td element and conditionally adding in that 'vs' message.

var getGamesAll = {
  "games": [
    {
      "id": 1,
      "init_date": "2020-02-11T07:47:33.627+0000",
      "players_in_game": [
        {
          "id": 1,
          "player": {
            "id": 1,
            "player": "Jack Bauer",
            "email": "[email protected]"
          }
        },
        {
          "id": 2,
          "player": {
            "id": 2,
            "player": "Chloe O'Brian",
            "email": "[email protected]"
          }
        }
      ]
    },
    {
      "id": 2,
      "init_date": "2020-02-11T08:47:33.627+0000",
      "players_in_game": [
        {
          "id": 3,
          "player": {
            "id": 1,
            "player": "Rome Jones",
            "email": "[email protected]"
          }
        },
        {
          "id": 4,
          "player": {
            "id": 2,
            "player": "Ludacris",
            "email": "[email protected]"
          }
        }
      ]
    },
  ]
}

new Vue({
el:"#players",
data:{
  getGamesAll: getGamesAll
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<table id="players">
<tr v-for="(general, index) in getGamesAll.games" v-bind:key="index">
  <td>Game {{general.id}}:</td>
  <td v-for="(gamePlayer, j) in general.players_in_game" :key="j">
    {{gamePlayer.player.player}} <span v-if="j<1">vs</span>
  </td>
</tr>
</table>

Really thanks for your help Kyle, as well as to Leandro Mantilla

Leandro Matilla · Accepted Answer · 2020-02-11 17:30:38Z

0

You just can find the players by id like this:

function getPlayers(games, playerNumber) {

    const players = games.map(game => { // for each game
        return game.players_in_game.map(players => { // for each player
            if (players.player.id === playerNumber) {
                return players.player;
            }
        }).filter(player => player); // Remove distinct players
    });

    return players; // Return players with id === playerNumber
}

getPlayers(data.games, 2);

Return should be:

Then your template...

<tr v-for="(general, index) in getGamesAll.games" v-bind:key="index">
  <td>Game {{general.id}}</td>

  <td v-for="firstPlayer in getPlayers(getGamesAll.games, 1)">
    {{ firstPlayer.player }}
  </td>

  <td>VS</td>

   <td v-for="secondPlayer in getPlayers(getGamesAll.games, 2)">
    {{ secondPlayer.player }}
  </td>
</tr>

answered Feb 11, 2020 at 17:30

Leandro Matilla

1,0315 silver badges15 bronze badges

9 Comments

Enrique GF Over a year ago

just put that function in my computed and apply the logic but throws 'games.map 'is not a function, why could be this for?

Leandro Matilla Over a year ago

Because games is not an Array. Check that first parameter is the games key

Enrique GF Over a year ago

how can i check that...sorry for my ignorance

Leandro Matilla Over a year ago

Check if the function getPlayers() at first parameter you are sending getGamesAll.games.

Leandro Matilla Over a year ago

Or put and console.log or breackpoint in first line of the function getPlayers, like: console.log(games);

|

Collectives™ on Stack Overflow

Looping over an array of objects on Vuejs template

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related