Problem with loop fetching and returing response

Question

It's my first stackoverflow querstion so be gentle for me 😅

I'am making pokedex app with react query and fetch but I have problem with returning array of my pokemons.

I'm trying to fetch a pokeApi which returns an array of results consisting of objects with another url. Then I try to map trough results array and fetch url for individual pokemon then push it to the arr variable. In the end, I'am returning arr which is not readable.

How to properly push data to arr in map?

What i'am doing wrong? Is there solution?


const fetchData = async (key) => {
    const data = await fetch(`https://pokeapi.co/api/v2/pokemon`)
      .then((res) => res.json())
      .then((data) => {
        return data;
      });
    const arr = [];
    data.results.map((item) => {
      return fetch(item.url)
        .then((res) => res.json())
        .then((data) => {
          arr.push(data);
        });
    });
    return arr;
  };

  const { isLoading, data } = useQuery("pokemons", fetchData, {
    refetchOnWindowFocus: false
  });

  if (isLoading) return <div>loading...</div>;
  console.log(data); // cant read
  return <div>Data loaded</div>;

https://codesandbox.io/s/strange-pond-wz4ws?fontsize=14&hidenavigation=1&theme=dark

You await the response but you do not await the parsing of json which is also async. In general you should not mix await with .then(). Use one or the other. Also inside of your map() callback you are returning a Promise instead of an actual result as fetch() is async. — trixn
– trixn, Commented Oct 8, 2020 at 10:12

JAM · Accepted Answer · 2020-10-08 10:20:46Z

1

The issue with your fetchData function, is that it does not wait for any of the subsequent fetches for each item.

To solve this, you have to map each of the results as a Promise, then wait for all these promises to finish by utilizing Promise.all

Your fetchData function might look something like this:

  const fetchData = async (key) => {
    const data = await fetch(`https://pokeapi.co/api/v2/pokemon`)
      .then((res) => res.json())
      .then((data) => {
        return data;
      });

    // Wait for all subsequent fetches to finish
    const arr = await Promise.all(
      data.results.map((item) => fetch(item.url).then((res) => res.json()))
    );

    return arr;
  };

answered Oct 8, 2020 at 10:20

JAM

6,2251 gold badge36 silver badges50 bronze badges

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

2 Comments

Piotr Over a year ago

but how now I push to arr my fetch(item.url) response data?

trixn Over a year ago

@Pero You don't need to push it into the array. map() returns an array of promises and Promise.all awaits all of them. The result is already what you want. You should not use map() together with push() at all because map() already creates and fills an array. push() only makes sense with forEach().

trixn · Accepted Answer · 2020-10-08 12:01:10Z

0

The solution proposed by @JAM but without any .then(). Error handling is omitted (You can use catch() or a try/except block):

const fetchData = async key => {
    const res = await fetch(`https://pokeapi.co/api/v2/pokemon`);
    const data = res.json();

    // Wait for all subsequent fetches to finish
    return Promise.all(
        data.results.map(async item => {
            const res = await fetch(item.url);
            return res.json();
        }
    );
};

answered Oct 8, 2020 at 12:01

trixn

16.4k2 gold badges40 silver badges59 bronze badges

Collectives™ on Stack Overflow

Problem with loop fetching and returing response

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related