Map function is not working inside the .then()

Question

I have two functions as following function 01

export const generateProductList = async (products: IProduct[]) => {
    const productList: IProduct[] = [];
    products.map((product: IProduct, i: number) =>{
        downloadImageAwsS3(product.image)
            .then(res => {
                productList.push({...product, image: res})
            })
    })
    console.log(productList)
    return productList
}

function 02

const productGenerator = (products: IProduct[]) => {
    const checkoutList: any[] = [];
    generateProductList(products)
      .then((res) => {
        console.log(res)
        res.map(product => {
          checkoutList.push(product)
          console.log(product)
        })
    return checkoutList
  })
  }

in the second function inside .then() and inside the map function is not working properly, Can anyone help me to figureout this

Does this answer your question? [How to return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Daniel A. White, May 31 '21 at 20:17
It is working fine, but you are printing your list before the callback was executed ... — derpirscher, May 31 '21 at 20:19
Ignoring the log statements, the code simplifies to `const productGenerator = generateProductList;`. — Roamer-1888, Jun 01 '21 at 00:31

score 0 · Answer 1 · answered May 31 '21 at 20:18

0

you can try response = res.json() inside .then() sometimes response comes in readstream.

answered May 31 '21 at 20:18

Shubhro Banerjee

21
2

j1mbl3s · Answer 2 · 2021-05-31T21:06:57.493

It's a bit hard to say given that you provide little context as to the issue that you're facing. What do you expect, and what are you seeing?

I'll take a guess and say that the generateProductList method is returning before it's finished mapping all of the products, assuming downloadImageAwsS3 method returns a Promise.

You can try returning Promises from products.map, so that each product in products is mapped to a Promise, then wait for all of those promises to settle with Promise.allSettled.

export async function generateProductList(products: IProduct[]): Promise<IProduct[]> {
  const productList: IProduct[] = [];
  await Promise.allSettled(products.map(async (product: IProduct) => {
    const response = await downloadImageAwsS3(product.image);
    productList.push({...product, image: response});
  }));
  return productList;
}

score 0 · Answer 3 · answered May 31 '21 at 20:48

The problem is that you're not waiting for the results of promises. Both downloadImageAwsS3(product.image) and generateProductList(products) are returning a Promise. Also, the map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

A correct version of your code would be something like this:

export const generateProductList = async (products: IProduct[]) => {
  const promises = products.map(async (product: IProduct, i: number) =>{
      const res = await downloadImageAwsS3(product.image);
      return {...product, image: res};
  });
  const productList = await Promise.all(promises);
  console.log(productList)
  return productList;
}

The second function doesn't make a whole lot of sense, because it's just returning the results of the first one, but if you want to map over the values and do something you can do it like that:

const productGenerator = async (products: IProduct[]) => {
   const productList = await generateProductList(products);
   const convertedProducts = productList.map((product) => {
     console.log(product)
     // return a new value here
   });
   return convertedProducts;
}

Map function is not working inside the .then()

3 Answers3