Storing json data from api call in array

App Building
1

I need to create a js script that can call an API function and get the json back, and push it to an array and then move to the next one

this is what i have so far but it returns an empty array even though the call is getting the right data

let jsonArray = [];

(async () => {
  for (let i = 0; i < get_matches.data.url.length - 1; i++) {
    try {
      const json_data = await new Promise((resolve, reject) => {
        crawl_url.trigger({
          additionalScope: {
            url: get_matches.data.url[i]
          },
          onSuccess: (data) => {
            resolve(data);
          },
          onError: (error) => {
            reject(error);
          }
        });
      });
      jsonArray.push(json_data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  }
})();
return jsonArray
2

Hi @hugowaller,

The problem with the code is that the crawl_url.trigger() function is asynchronous. This means that it returns control to the code before it is finished executing. As a result, the jsonArray.push() statement is executed before the crawl_url.trigger() function has finished fetching the data.

To fix this, you need to use the await keyword to wait for the crawl_url.trigger() function to finish executing before executing the jsonArray.push() statement.

Here is a modified version of the code that should work:

let jsonArray = [];

(async () => {
  for (let i = 0; i < get_matches.data.url.length - 1; i++) {
    try {
      const json_data = await crawl_url.trigger({
        additionalScope: {
          url: get_matches.data.url[i]
        }
      });
      jsonArray.push(json_data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  }
})();

return jsonArray;

Another way to fix the problem is to use a promise chain. Here is an example:

let jsonArray = [];

crawl_url
  .trigger({
    additionalScope: {
      url: get_matches.data.url[0]
    }
  })
  .then((data) => {
    jsonArray.push(data);
    return crawl_url.trigger({
      additionalScope: {
        url: get_matches.data.url[1]
      }
    });
  })
  .then((data) => {
    jsonArray.push(data);
    return crawl_url.trigger({
      additionalScope: {
        url: get_matches.data.url[2]
      }
    });
  })
  .then((data) => {
    jsonArray.push(data);
  })
  .catch((error) => {
    console.error("Error fetching data:", error);
  });

return jsonArray;

Which method you choose to use is up to you. The promise chain method is more explicit and easier to read, but the async/await method is more concise and easier to write.

Hope this helps.

:grinning:

Patrick

2 Likes
3
4

Hi @hugowaller,

This seems to work for me :crossed_fingers: Hope it works for you:

let jsonArray = [];

for (let i = 0; i < get_matches.data.url.length; i++) {
try {
const json_data = await crawl_url.trigger({
additionalScope: {
url: get_matches.data.url[i]
}
});
jsonArray.push(json_data);
} catch (error) {
console.error("Error fetching data:", error);
}
}

return jsonArray;