node.js - using .map to enrich object - node.js

Question

I have an object (set of product data), within some of those objects I have an array of images. For each of the images I need to call an API to get extra data, then I want to put this back into the original object.
The API call is by ID, that's working and I can get the data.
I think I have a problem with the async nature and I am missing something (probably obvious!)...
Thanks!
function fetchImages(products) {
var deferred = Q.defer();
var product_updates = [];
products.forEach(function (product, idx, array) {
var image_updates = [];
if (product.images.length > 0)
{
//var id = product.images.mediaId;
//console.log(id);
image_updates = product.images.map(function(task) {
return {
image_urls: getImage(task.mediaId)
}
});
console.log(image_updates);
product_updates.push(image_updates);
}
else
{
product_updates.push(product);
}
if (idx === array.length - 1)
{
//console.log(stock_updates);
deferred.resolve(product_updates);
}
});
return deferred.promise;
}
Here is the shortened "getImage" function...
function getImage(id)
{
// Request options
var options = {
url: cfg.base_url + (cfg.base_url[cfg.base_url.length - 1] != '/' ? '/' : '') + 'api/media/' + id,
.........
};
request(options, function (error, response, body) {
// Check status code
if (response.statusCode >= 200 && response.statusCode <= 299) {
let result = JSON.parse(body);
console.log(result);
return result;
} else {
console.log("Failed to fetch images updates");
}
}
);
}
I'm also unsure if "deferred.resolve(product_updates);" is done correctly.. seems to work but not 100% sure.
console.log for "image_update" returns:
[ { image_urls: undefined },
{ image_urls: undefined },
{ image_urls: undefined },
{ image_urls: undefined },
{ image_urls: undefined } ]
************ Amended fetchImages() function ***********
function fetchImages(products) {
const getImagesForProduct = function(product) {
return product.images.map(function(task) {
return {
product: product,
image_urls: getImage(task.mediaId)
}
});
}
const product_updates = products.map(getImagesForProduct)
return new Promise(function(resolve, reject)
{
resolve(product_updates);
});
}
This is more eloquent now... but still not got the promise needed?

Answer 1

In you example getImage makes and asynchronous call and therefore should return a promise. Many ways to return a promise - but the native promise object is the easiest (i suspect you could do this with Q too - but it has been a long time since I used that library).
function getImage(id)
{
// Request options
var options = {
url: cfg.base_url + (cfg.base_url[cfg.base_url.length - 1] != '/' ? '/' : '') + 'api/media/' + id,
.........
};
return new Promise(function(resolve, reject){
request(options, function (error, response, body) {
// Check status code
if (response.statusCode >= 200 && response.statusCode <= 299) {
let result = JSON.parse(body);
console.log(result);
resolve(result);
} else {
reject(error);
}
});
})
}
The other function could be written more eloquently too. Essentially:
// :: Product -> [{image_urls: Promise}]
const getImagesForProduct = function(product) {
return product.images.map(function(task) {
return {
image_urls: getImage(task.mediaId)
}
});
}
const product_updates = products.map(getImagesForProduct)
//=> [[{image_urls: Promise}]]
In this scenario you still need to wait on the promises to resolve. I suspect you could flatten the array or restructure the transformations to be less hairy - but it depends on what your other code needs

Answer 2

Here's the final function that deals with the promises:
function fetchImages(products) {
const getImagesForProduct = function(product) {
if (product.images && product.images.length === 0) {
return Promise.resolve(product)
}
const getImagesPromiseTasks = product.images.map(task => getImage(task.mediaId));
return Promise.all(getImagesPromiseTasks)
.then(retrievedUrls => {
product.image_urls = retrievedUrls
return product
})
}
return Promise.all(products.map(getImagesForProduct))
}