Is there a way to call nested array in Vue?

Question

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

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.

Ahmed Hammad · Accepted Answer · 2020-05-08 19:52:31Z

1

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.

edited May 8, 2020 at 19:52

answered May 8, 2020 at 19:31

Ahmed Hammad

3,1255 gold badges22 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yahoo Over a year ago

I tried it and returns me first object only when I use [0]. I need to print all the booker_id not only one.

Ahmed Hammad Over a year ago

@Yahoo I modified it to print all the booker_id items.

Yahoo Over a year ago

I missed out the forEach loop as it will contain multiple objects. Got it thank you. Your answer was helpful.

Collectives™ on Stack Overflow

Is there a way to call nested array in Vue?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related