1

I'm trying to get random id from data obtained through an api in vuejs. Then i'm trying create a code like this.

data() {
   return {
     mostPlayed: [],
     randomData: [],
   }
},
created() {
   this.randomData = this.randomItem(this.mostPlayed);
},
methods: {
   async getMostPlayed() {
      try {
        const response = await axios.get(url);
        const data = response.data.slice(0, 9);
        this.mostPlayed = data;
      } catch (error) {
        console.log(error);
      },
   randomItem (items) {
      return items[Math.floor(Math.random() * items.length)];
    }
},
mounted() {
   this.getMostPlayed();
}

Sample data

[ 
 {
   id: 1
   title: "Forza Horizon 5"
 },
 {
   id: 2
   title: "Apex Legends"
 },
 {
   id: 3
   title: "Battlefield 2042"
 },
 {
   id: 4
   title: "Fortnite"
 },
 {
   id: 5
   title: "Genshin Impact"
 },
]

But nothing happened. I want to get random id with sample data like that. Example output like this. [ { id: 3 }, { id: 1 }, { id: 5 } ].

Blek Wit
  • 13
  • 4

1 Answers1

2

You are calling method for API call in mounted and generating the random list from the most played list in created. But as per the lifecycle diagram of vue given here, you can see that created hook comes first and then mounted hook. So that way you are creating random list on an empty most played array.

As a solution call the getMostPlayed method inside created and randomItem method inside getMostPlayed after API response.

Something like this :

data() {
    return {
        mostPlayed: [],
        randomData: [],
    }
},
created() {
    this.getMostPlayed();
},
methods: {
    async getMostPlayed() {
         try {
             const response = await axios.get(url);
             const data = response.data.slice(0, 9);
             this.mostPlayed = data;
             this.randomData = this.randomItem(this.mostPlayed);
         } catch (error) {
             console.log(error);
         },
    randomItem (items) {
         return items[Math.floor(Math.random() * items.length)];
     }
}

Please refer to answers to this question if you want to have multiple random elements as current logic is to get a single random element from an array : Get multiple random elements from array

Vipulw
  • 1,253
  • 5
  • 12
  • ok, i try this code and then got a new message. there is said "[vue-router] missing param for named route "GameDetail": Expected "id" to be defined". But i try to console.log(this.randomData), only one data appears. – Blek Wit Nov 30 '21 at 12:31
  • The logic written in randomItem method would always return single element is what I think. The Consider checking that logic here. https://stackoverflow.com/questions/4550505/getting-a-random-value-from-a-javascript-array – Vipulw Nov 30 '21 at 12:40
  • hmm ok, but is it possible to return a lot of random data in the form of an array? – Blek Wit Nov 30 '21 at 12:43
  • @BlekWit I have updated my answer with link to similar question. I think what you are asking is a completely different question overall, and I would like you to take look at existing answers rather than we discussing here. If my answer helped you, please upvote and accept to help other people facing similar issue. Cheers & Thanks : ) – Vipulw Nov 30 '21 at 12:45
  • ok sir, actually i was just asking. but thank you so much for your answer – Blek Wit Nov 30 '21 at 12:51