(VUEJS) Access methods from Axios inside created - vue.js

Question

I have just a simple error which is confusing me almost 3 weeks.
my question is about, I want to return string from methods "idvideo" at the end of my axios API url, but nothing is happen.
as you can see on my code below.
I have been searching for solution and try an error for many times, but still never found any best answer that can help me out.
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
})
.catch(e => {
this.errors.push(e)
}),
// 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)
})
},
}
I really appreciate any kind of solutions that can help me out. If you guys have best way to implement this function, let me know.
Sorry for my bad english and any mistakes. This is my very second time post question in this platform.
Thank you very much sir!

Answer 1

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)
}),
,
}