I'm running an axios ajax call within a for object loop that is also within another axios ajax call. The parent object seems to be available within the the internal axios function, but specifying the object within the loop with [i] returns undefined. Here is my current code:
// GET NEXT PAGE OF POSTS
axios.get(`https://rootdomain.co.uk/cms/index.php/wp-json/wp/v2/posts?offset=1&per_page=4&page` + this.currentPage)
.then(function (response) {
var additionalPosts = response.data
// var additionalPostsThumbnails
// SET FEATURED IMAGE AND THUMBNAIL KEY AND VALUE
for (var i = 0; i < additionalPosts.length; i++) {
const featuredImageAPI = 'https://rootdomain.co.uk/cms/index.php/wp-json/wp/v2/media/' + additionalPosts[i].featured_media
axios.get(featuredImageAPI).then(response => {
console.log(additionalPosts)
console.log(additionalPosts[i])
})
}
// REMOVE 'is-loading' CLASS TO BUTTON
button.classList.remove('is-loading')
})
So console.log(additionalPosts)
is working, but console.log(additionalPosts[i])
is returning undefined. Any ways around this?
Once I can access the specific object the aim is to add another key and value to the individual objects.
Appreciate any help. Thanks!