CODEWITHSUNDEEP
arraysvue.js
Yahoo
Yahoo

Reputation: 568

Is there a way to call nested array in Vue?

I am really new to Vue JS. I was trying to print my nested object using console.log but it throws me an undeifned error.

Array Image

Objects Description

View Code

<b-button variant="primary" v-on:click="dontknow();">Print</b-button>

Script

methods:{
      dontknow(){
        console.log(this.allPlayerList.booker_id);
      },
 }

It displays me undefined when I use console.log(this.allPlayerList.booker_id). Can anyone please let me know what am I doing wrong? I want to get all the booker_id from allPlayerList.

Upvotes: 0

Views: 134

Answers (1)

Ahmed Hammad
Ahmed Hammad

Reputation: 3085

allPlayerList obviously is an array of objects, which doesn't have itself a booker_id property, but contains objects which have it.

To print all the booker_id you need to loop over the array, and print it for every object, there are multiple ways of doing this, some of the common ways are:

this.allPlayerList.forEach(player => {
  console.log(player.booker_id);
});

Another way would be 

console.log(this.allPlayerList.map(player => return player.booker_id));

The fist way will print every booker_id separately, while the second will print and array of all the booker_id items.

Upvotes: 1

Related Questions