Iterating through an array of objects within a Vuejs template

Question

Iterating through an array of objects within a Vuejs template

Consider the JSON data below:

{
  "games": [
    {
      "id": 1,
      "init_date": "2020-02-11T07:47:33.627+0000",
      "players_in_game": [
        {
          "id": 1,
          "player": {
            "id": 1,
            "player": "Jack Bauer",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02682c6063776770426176772c656d7430">[email protected]</a>"
          }
        },
        {
          "id": 2,
          "player": {
            "id": 2,
            "player": "Chloe O'Brian",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eeda0e1ecfce7efe0ceedfafba0e9e1f8">[email protected]</a>"
          }
        }
      ]
    },
    {
      "id": 2,
      "init_date": "2020-02-11T08:47:33.627+0000",
      "players_in_game": [
        {
          "id": 3,
          "player": {
            "id": 1,
            "player": "Rome Jones",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cea4e0acafbbabbc8eadbabbe0a9a1b8fc">[email protected]</a>"
          }
        },
        {
          "id": 4,
          "player": {
            "id": 2,
            "player": "Ludacris",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82e1acede0f0ebe3ecc2e1f6f7ace5edf4">[email protected]</a>"
          }
        }
      ]
    },
  ]
}

I am looking to display a Player VS another player for each 'players-in-game' entry, like so:

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

However, I'm having trouble with the implementation. Here is the code snippet I have tried:

<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>

This approach is flawed as it does not specify which player within the 'players-in-game' object to access. What would be the correct way to achieve this desired output?

javascript vue.js

Answer 1

Answer №1

It was crucial to pinpoint the correct node during the loop.

In this scenario, 'general' signifies one of the elements in 'getGamesAll'.

After entering that particular 'general' instance, we aim to perform a second loop based on the array at node 'players_in_game'.

Instead of iterating over the same object twice for each row representation, the goal is to find a method to accomplish it with just one loop. In this code snippet, I'm utilizing a single td element and conditionally including the '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": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73195d1112061601331007065d141c0541">[email protected]</a>"
          }
        },
        {
          "id": 2,
          "player": {
            "id": 2,
            "player": "Chloe O'Brian",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0665286964746f67684665727328616970">[email protected]</a>"
          }
        }
      ]
    },
    {
      "id": 2,
      "init_date": "2020-02-11T08:47:33.627+0000",
      "players_in_game": [
        {
          "id": 3,
          "player": {
            "id": 1,
            "player": "Rome Jones",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="147e3a7675617166547760613a737b6226">[email protected]</a>"
          }
        },
        {
          "id": 4,
          "player": {
            "id": 2,
            "player": "Ludacris",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bbf6b7baaab1b9b698bbacadf6bfb7ae">[email protected]</a>"
          }
        }
      ]
    },
  ]
}

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>

Answer 2

It was crucial to pinpoint the correct node during the loop.

In this scenario, 'general' signifies one of the elements in 'getGamesAll'.

After entering that particular 'general' instance, we aim to perform a second loop based on the array at node 'players_in_game'.

Instead of iterating over the same object twice for each row representation, the goal is to find a method to accomplish it with just one loop. In this code snippet, I'm utilizing a single td element and conditionally including the '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": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="73195d1112061601331007065d141c0541">[email protected]</a>"
          }
        },
        {
          "id": 2,
          "player": {
            "id": 2,
            "player": "Chloe O'Brian",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0665286964746f67684665727328616970">[email protected]</a>"
          }
        }
      ]
    },
    {
      "id": 2,
      "init_date": "2020-02-11T08:47:33.627+0000",
      "players_in_game": [
        {
          "id": 3,
          "player": {
            "id": 1,
            "player": "Rome Jones",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="147e3a7675617166547760613a737b6226">[email protected]</a>"
          }
        },
        {
          "id": 4,
          "player": {
            "id": 2,
            "player": "Ludacris",
            "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d8bbf6b7baaab1b9b698bbacadf6bfb7ae">[email protected]</a>"
          }
        }
      ]
    },
  ]
}

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>

Answer 3

Answer №2

If you want to locate specific players by their id, you can do so using the following method:

function fetchPlayers(data, playerID) {

    const foundPlayers = data.map(entry => { // loop through each game entry
        return entry.players_in_game.map(player => { // loop through each player in the game
            if (player.player.id === playerID) {
                return player.player;
            }
        }).filter(uniquePlayer => uniquePlayer); // remove duplicate players
    });

    return foundPlayers; // Return players with matching id
}

fetchPlayers(gameData.games, 2);

The expected output would be:

https://i.sstatic.net/J6PeY.png

After that, you can use this template...

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

  <td v-for="firstPlayer in fetchPlayers(gameList.games, 1)">
    {{ firstPlayer }}
  </td>

  <td>VS</td>

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

Answer 4

If you want to locate specific players by their id, you can do so using the following method:

function fetchPlayers(data, playerID) {

    const foundPlayers = data.map(entry => { // loop through each game entry
        return entry.players_in_game.map(player => { // loop through each player in the game
            if (player.player.id === playerID) {
                return player.player;
            }
        }).filter(uniquePlayer => uniquePlayer); // remove duplicate players
    });

    return foundPlayers; // Return players with matching id
}

fetchPlayers(gameData.games, 2);

The expected output would be:

https://i.sstatic.net/J6PeY.png

After that, you can use this template...

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

  <td v-for="firstPlayer in fetchPlayers(gameList.games, 1)">
    {{ firstPlayer }}
  </td>

  <td>VS</td>

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

Iterating through an array of objects within a Vuejs template

Answer №1

Answer №2

Similar questions

Prevent those pesky popups with this handy script

What are the benefits of installing both libraries A (react-router) and B (react-router-dom) together, especially when library B relies on library A for functionality

Instructions on adding a class to the parent element when the child has a particular class

VueJS does not show a component if it is contained within a v-if or v-show directive

Utilize Vuetify to showcase a vertical layout consisting of a header and a v-card, occupying the full height

Elegant Bootstrap 4 Carousel featuring a glimpse of the upcoming slide alongside the primary carousel item

Can anyone provide a solution for determining the number of active intervals in Javascript?

Tips for incorporating a variable into a JSON object value when dynamically constructing an object

Can you choose an option from a dropdown menu without relying on jQuery?

Using VueResource to send a GET request in Vue.js returned a response with a status

Differences between throwing errors, returning error objects, and using callbacks in Javascript

Transfer an object to $state.go

Unable to find module reference "three" at 137

Trigger a function in JavaScript by clicking on an element and passing its class

Using JQuery to Load a CSHTML File into a Modal in C#

Injecting a JavaScript object into an HTML string

AngularJS: Modifying directive according to service value update

Using Rxjs to handle several requests with various headers

Pass data to PHP using AJAX

Launch the file explorer using JavaScript/HTML