JavaScript - Merge objects from API fetch

Question

I need to merge objects that came from the API response. I tried the push function to join those response objects in one array but it always gives the result as an empty Array. I did this last week and until now there is no luck. I need help.

Here is my code:

var finaldata = []
await fetch("https://api-getting-the-ID")
  .then(res => res.json())
  .then(
    (result) => {
      return result.map(({ id }) => id)
    },
  ).then(ids => {
    ids.map((id, key) => {
      fetch(`https://myAPI/${id}`)
        .then(res => res.json())
        .then((response) => {
          finaldata.push(response)
        }),
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
    });
   this.setState({
      isLoaded: true,
      items: finaldata
    });
  })

Thank you in advance!

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — derpirscher, Jan 21 '23 at 10:12
you are never awaiting the `fetch`es insinde `ids.map(...)`. Thus, `this.setState` is executed way before these requests are finished ... — derpirscher, Jan 21 '23 at 10:15
Btw. you should not mix `async/await` with `.then().catch()` unless you exactly know what you are doing. And if know what you are doing, you probably know better than mixing those two. Because it leads to situations like yours ... — derpirscher, Jan 21 '23 at 10:16

Moritz Ringler · Accepted Answer · 2023-01-21T14:04:23.997

2

I think your finaldata array is being filled after you have put it into state. Try something like this:

const idData = await fetch("https://api-getting-the-ID").then(r => r.json())
const ids = idData.map(data => data.id)
try{
  const promises = ids.map(id => fetch(`https://myAPI/${id}`).then(r => r.json())
  const items = await Promise.all(promises)
  this.setState({isLoaded: true, items})
} catch(error){
  this.setState({isLoaded: true, error});
}

edited Jan 21 '23 at 14:04

answered Jan 21 '23 at 10:35

Moritz Ringler

9,772
9
21
34

I think you need to use `const idValues = await Promise.all(promises).then(resp => resp.json())`. 'Cause looking at this code, you'll end up with the same issue as OP – Kitanga Nday Jan 21 '23 at 11:35
1

@KitangaNday That would not work. `Promise.all()` gives you an array with the return values of the resolved promises, and you cannot call `.json()` on an array. Note that `const x = await promise; f(x); is equivalent to `promise.then(x => f(x))`. – Moritz Ringler Jan 21 '23 at 11:42
Ah yes this is correct, then the correct code is `const idValues = await Promise.all(promises).then(resps => Promise.all(resps.map(resp => resp.json()))` Reason being that `items` will have a list of promises, not their values with your current code. – Kitanga Nday Jan 21 '23 at 12:24
1

`response.json()` returns a `Promise` not the value – Kitanga Nday Jan 21 '23 at 12:24
https://developer.mozilla.org/en-US/docs/Web/API/Request/json – Kitanga Nday Jan 21 '23 at 12:25
It's all good, just hoping the OP gives you your rep XD – Kitanga Nday Jan 21 '23 at 13:11
const ids = idDataJson.json().map(data => data.id) didn't get the result. I will try to identify the problem. – Kervy Hipona Jan 21 '23 at 14:02
@KervyHipona Jupp, sorry, updated the answer – Moritz Ringler Jan 21 '23 at 14:05
I got the final answer. Thank you so much! Cheers! – Kervy Hipona Jan 21 '23 at 14:12

JavaScript - Merge objects from API fetch

1 Answers1