[Vuejs]-(VUEJS) Access methods from Axios inside created

by

0👍

✅

Since, they are asynchronous requests, I have following solution in my mind.

Solution:

Move the next axios call within the first axios call. This is because, only after first call, the ‘items’ will be retrieved and then it will assigned to this.items So next axios call will have the required data from idvideo() function.

export default {
    data() {
      return {
        errors: [],
        videos: [],
        items: []

      }
    },

    methods: {
      idvideo: function() {
        const data = this.items
        const result = data.map((item) => {
          return {
            fetchId: item.snippet.resourceId.videoId
          };
        }).sort((a, b) => b.count - a.count);

        var i, len, text;
        for (i = 0, len = result.length, text = ""; i < len; i++) {
          text += result[i].fetchId + ",";
        }
        var x = text.slice(0, -1);
        return(x);
      }

    // Fetches posts when the component is created.
    created() {

      // Ini adalah API utk playlist yang dipilih
      axios.get("https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PLjj56jET6ecfmosJyFhZSNRJTSCC90hMp&key={YOUR_API_KEY}")
      .then(response => {
        // JSON responses are automatically parsed.
        this.items = response.data.items

        // Ini adalah API utk data yang dipilih
      axios.get('https://www.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&key={YOUR_API_KEY}&id='+this.idvideo())
    .then(response => {
        // JSON responses are automatically parsed.
      this.videos = response.data.items
      })
      .catch(e => {
        this.errors.push(e)
      })
    }
      })
      .catch(e => {
        this.errors.push(e)
      }),
      ,
    }

Leave a comment