Function returning array with inaccessible data

Question

SCENARIO So I am trying to do multiple API requests with different URLs, add all the responses to an array, then return the array and use it. My code:

const getData = (dataURLs) => {
  let returnData = [];
  for (let i = 0; i < dataURLs.length; i++) {
    getFetch(dataURLs[i]).then((response) => {
      returnData.push(response);
      return response;
    });
  }
  console.log(returnData[0]);
  return returnData;
};

So this is the function that makes the requests, here is what the getFetch function is:

const getFetch = async (url) => {
  return fetch(url)
    .then((response) => {
      if (!response.ok) {
        // get error message from body or default to response status
        const error = (response && response.message) || response.status;
        return error;
      }
      return response.json();
    })
    .catch((error) => {
      return error;
    });
};

This just makes the request and returns the JSON which is what I want, and this function works as I use it in other places.

My issue is, when i make the request using the getData function, it will return a blank array '[]', however when I click on this array in inspect element, it displays this.

[] ->
    0: {nodes: Array(5), edges: Array(5), self: Array(1)}
    length: 1

If I try to access anything in this array in js it just doesn't let me. I think the issue is that when I do .push() it doesn't wait and just returns the promise inside the array, then later on the promise is resolved, hence why I can't use it.

Just wondering if anyone knew a fix to this?

Thanks :)

Function returning array with inaccessible data

0 Answers0