ReactJS axios.post inside a map through array function that returns an object

Question

So I try to map through an array and for each item in the array is a parameter value for a post request. So Im looking for an finalArray with the post request response return value, and need to use the finalArray somewhere else.

const finalArray = paramArray.map(paramKey => {
  axios.post(URL, {
    filters: [
      {
        field: "key", 
        values: [paramKey.key]
      }
    ]
  }).then(res => {
      //res.data.itemName
    });

  return {
    key: paramKey.key,
    text: //res.data.itemName,
    value: paramKey.value
  }
});

so Im not sure how to pass the res.data.itemName outside of the function in .then. I tried declaring a variable before axios such as let name = "";, and inside .then I have name = res.data.itemName, then I pass the name to text as text: name, but this will give me all empty string. I also tried putting the return inside .then, this way the finalArray gives me undefined values.

Is there any way to pass the res.data.itemName as the value of text?

topdev87 · Accepted Answer · 2020-11-05 03:30:31Z

1

You can use Promise.all

async function() {
  const promises = paramArray.map(paramKey => axios.post(URL, {
      filters: [
        {
          field: "key", 
          values: [paramKey.key]
        }
      ]
    })
  );

  const values = await Promise.all(promises)
  const finalArray = paramArray.map((paramKey, index) => {
    return {
      key: paramKey.key,
      text: values[index].data.itemName,
      value: paramKey.value
    }
  })
}

edited Nov 5, 2020 at 3:30

answered Nov 5, 2020 at 3:21

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

4 Comments

user14459580 Over a year ago

But this way can I use finalArray outside of this Promise.all?

topdev87 Over a year ago

You can use await.

topdev87 Over a year ago

i updated the answer using await. by doing so, you can use finalArray.

user14459580 Over a year ago

Thanks I had to rearrange my code for a little bit to make it work, but this helped a lot!

Collectives™ on Stack Overflow

ReactJS axios.post inside a map through array function that returns an object

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related