How to return data from an async .map() function?

Question

I am looking to return some data from an asynchronous .map() function. It's async due to the axios call being inside of it to return some data. I am trying to .map() through an array [] inside files.kitchen and then call axios to get the base64 of each image URL inside files.kitchen. I have tried logging the data using await due to the asynchronous behavior of my function. The await returns undefined each time. I know I am calling it right by using await. However, I could have a syntax error. I've studied each relative question on here and none of them have worked for me.

Here is my code.

  const getbase64Data = () => {
    files.kitchen
      ? files.kitchen.map(async (image, index) => {
          const response = await axios.get(image, {
            responseType: "arraybuffer",
          });
          const buffer = Buffer.from(response.data, "binary").toString(
            "base64"
          );
          const data =
            "data:" + response.headers["content-type"] + ";base64," + buffer;
          return data;
        })
      : null;
  };
  console.log(await getbase64Data());

Please let me know if I need to share anything else.

There's no return in your getbase64Data() function.

Patrick Roberts
– Patrick Roberts

2020-08-19 04:27:10 +00:00
Commented Aug 19, 2020 at 4:27 — Patrick Roberts
– Patrick Roberts, Commented Aug 19, 2020 at 4:27

DynasticSponge · Accepted Answer · 2020-08-19 04:48:41Z

2

From: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Arrow functions can have either a "concise body" or the usual "block body".

In a concise body, only an expression is specified, which becomes the implicit return value. In a block body, you must use an explicit return statement.

in your code:

const getbase64Data = () => {
    files.kitchen
      ? files.kitchen.map(async (image, index) => {
          const response = await axios.get(image, {
            responseType: "arraybuffer",
          });
          const buffer = Buffer.from(response.data, "binary").toString(
            "base64"
          );
          const data =
            "data:" + response.headers["content-type"] + ";base64," + buffer;
          return data;
        })
      : null;
  };
  console.log(await getbase64Data());

getBase64Data has a block body... to use implicit return you need to remove the outer braces...

const getbase64Data = () => 
    files.kitchen
      ? files.kitchen.map(async (image, index) => {
          const response = await axios.get(image, {
            responseType: "arraybuffer",
          });
          const buffer = Buffer.from(response.data, "binary").toString(
            "base64"
          );
          const data =
            "data:" + response.headers["content-type"] + ";base64," + buffer;
          return data;
        })
      : null;
  console.log(getbase64Data());

Or, simply add a return statement

const getbase64Data = () => {
    var returnArray = files.kitchen
      ? files.kitchen.map(async (image, index) => {
          const response = await axios.get(image, {
            responseType: "arraybuffer",
          });
          const buffer = Buffer.from(response.data, "binary").toString(
            "base64"
          );
          const data =
            "data:" + response.headers["content-type"] + ";base64," + buffer;
          return data;
        })
      : null;
    return returnArray;
  };
  console.log(getbase64Data());

edited Aug 19, 2020 at 4:48

answered Aug 19, 2020 at 4:43

DynasticSponge

1,4612 gold badges11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

graysonmcm Over a year ago

You were right, along with PLASMA chicken. The implicit return helped me. The return for that was an array of Promises. I then used the Promise.all()

PLASMA chicken Over a year ago

Make sure to mark this Answer as Accepted Answer, so that the Question shows up as Solved, thanks!

PLASMA chicken · Accepted Answer · 2020-08-19 04:39:49Z

0

As Patrick Robert pointed out in his comment, you need to add a return. If you then get an array full of Promises use Promise.all

I often use something like this:

const fetched = await Promise.all(kitchen.map(async (image, index) => {
            return axios.get(image, {
            responseType: "arraybuffer",
          });
}))
fetched.map(x => { /* do stuff with fetched stuff here */ })

Promise.all awaits evey Promise element in the array.

edited Aug 19, 2020 at 4:39

answered Aug 19, 2020 at 4:30

PLASMA chicken

2,7952 gold badges18 silver badges29 bronze badges

1 Comment

graysonmcm Over a year ago

I was able to use Promise.all just fine, along with DynasticSponge's answer of the implicit return. Cheers

charri · Accepted Answer · 2020-08-19 04:44:27Z

0

You can do something like this:

const getbase64Data = () => {
  if (files.kitchen) {
    return Promise.all(files.kitchen.map(async (image, index) => { //Promise.all ensures all the async code gets executed
      const response = await axios.get(image, {
         responseType: "arraybuffer",
      });
        const buffer = Buffer.from(response.data, "binary").toString(
          "base64"
        );
        const data =
          "data:" + response.headers["content-type"] + ";base64," + buffer;
          return data;
     }));
  }
  return null;
};
console.log(await getbase64Data());

answered Aug 19, 2020 at 4:44

charri

1,0529 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to return data from an async .map() function?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related