Properly associate Key / Value Pairs - arrays

Question

I've been trying to figure this out but still having trouble. I have an array of objects and what I am trying to do is update the key of slug to ID and change it's value to the ID of the blog post that is returned from an API. I also want to do the same for the key featuredImage where I return data from API and then update the value in this array of objects. I don't have anyway to associate the slug to the featuredImage except for the way they appears in the original postData array of objects. If I am going to be making API calls and also manipulating the data is there a way to ensure that I don't mess up my key / value pairs here. What I've been struggling with is I can't seem to hold the order properly and my data ends up being in the wrong order in my final array of objects. Any help would be much appreciated.
const postData =[
{ slug: sample-post-1, featuredImage: 'https://www.rusticfurnitureboston.com/hubfs/Blog_Media/rustic20coffee20table.jpeg%3Ft=1528912781831-6.jpeg' },
{ slug: sample-post-2, featuredImage: 'https://www.rusticfurnitureboston.com/hubfs/Blog_Media/Amazing-Table-For-Flamboyant-Furniture-Home-Design-Ideas-With-Rustic-Furniture-Coffee-Table.jpg%3Ft=1528912781831-6.jpeg' },
{ slug: sample-post-3, featuredImage: 'https://www.rusticfurnitureboston.com/hubfs/Blog_Media/envoy-lookout-rooftop-11b-780x520.jpg%3Ft=1528912781831-6.jpeg' },
{ slug: sample-post-4, featuredImage: 'https://www.rusticfurnitureboston.com/hubfs/Blog_Media/mountain-landscape-wallpaper-29048-29765-hd-wallpapers.jpg%3Ft=1528912781831-6.jpeg'},
{ slug: sample-post-5, featuredImage: 'https://www.rusticfurnitureboston.com/hubfs/Blog_Media/mountain-landscape-wallpaper-29048-29765-hd-wallpapers.jpg%3Ft=1528912781831-6.jpeg' }
]
This is the function that I am trying to run but this is where I try to create a new Object based on the response the items are out of order.
const uploadImages = async (postData) => {
const newImages = [];
try {
await Promise.all(postData.map(async featuredImage => {
const option = {
method: 'POST',
url: fileAPIURL,
qs: {
access_token: ACCESS_TOKEN,
},
headers: {
'content-type': 'multipart/form-data'
},
formData: {
folder_paths: 'Blog_Media',
image: request(featuredImage)
},
json: true
}
return request(option)
.then((response) => {
response.objects.map((content) => {
return newImages.push(Object.assign({
featuredImage:content.url }));
});
})
}))
return newImages;
} catch (error) {
throw new Error('Cannot upload image to file manager, try checking
your URL');
}
}

Answer 1

When you run a bunch of asynchronous operations in parallel, they can complete it any order. So, when you do this:
newImages.push(...)
The newImages array is going to be in the order that your parallel async operations were completed. That will be some random order.
But, Promise.all() will keep the data in the proper order if you let it manage the returned data for you. So, inside of postData.map(), you can return an array of objects. Then Promise.all() will keep that array in the proper order relative to the other arrays. Then, at the end of the Promise.all().then(), you will have an array of arrays (all in the proper order) so all you need to do to get it into a single flat array in the proper order is to flatten that.
const uploadImages = (postData) => {
return Promise.all(postData.map(featuredImage => {
const option = {
method: 'POST',
url: fileAPIURL,
qs: {
access_token: ACCESS_TOKEN,
},
headers: {
'content-type': 'multipart/form-data'
},
formData: {
folder_paths: 'Blog_Media',
image: request(featuredImage)
},
json: true
}
return request(option).then((response) => {
return response.objects.map((content) => {
return {featuredImage: content.url};
});
});
})).then(results => {
// flatten the array of arrays into a single array
return [].concat.apply([], results);
}).catch(error => {
throw new Error('Cannot upload image to file manager, try checking your URL ');
});
}
Also, you don't seem to be actually using async/await for anything useful here to I removed that.
The one part of your code I don't understand is where you pass:
image: request(featuredImage)
as part of the formData to another request. That will put a promise into the formData since request(featuredImage) will return a promise. Is that really what you want?