What is the best way to combine arrays fetched from two different Axios API Calls?

Question

What is the best way to combine arrays fetched from two different Axios API Calls?

Currently, I am faced with a challenge while writing an Express API call. The situation involves making multiple Axios API calls within the same call, and I seem to hit a roadblock.

The concept behind the Express API call is that it receives a query parameter labeled "tags," which can contain any number of tags separated by commas. For example, the URL structure could be:

localhost:5000/api/stuff?tags=tech,history,culture,etc

I have successfully managed to extract the individual tags into an array for further processing.

const theTags = req.query.tags;

const tagsArray = theTags.split(",");

This results in an array like this:

["tech","history","culture","etc"]

However, I've encountered a hurdle at this stage. My task now is to iterate through each tag in the array and perform an Axios API call using each one. Initially, I thought of achieving this using the forEach method. Since each Axios API call should return an array of data related to the specified tag, I believed utilizing the forEach method would help gather all the results effectively:

// Declare an empty array outside the forEach loop.
const sumOfStuffArray = [];

// Begin the forEach loop.    
tagsArray.forEach( (element) => {

   // Make the API call for the current element
   const response = axios.get(`https://api.somewebsite.io/blahblah/stuff?tag=${element}`);
    
   // Retrieve the array from the response data
   const responseArray = response.data.stuff;

   // Iterate through the responseArray using another forEach loop and...
   responseArray.forEach( (anotherElement) => {
      
      // ...append each element of the response array to the sumOfStuffArray
      sumOfStuffArray.push(anotherElement);

   }

}

Unfortunately, my approach has been unsuccessful so far. Every time I attempt to check the length of sumOfStuffArray after the supposed completion of the forEach method, it returns an empty array.

I strongly suspect that I may be overlooking something related to async/await or .then statements, but I'm struggling to identify how to resolve it!

Does anyone have suggestions on how I can consolidate all these array elements into a single array successfully?

javascript arrays foreach async-await axios

Answer 1

Answer №1

There are two important points to consider:

axios.get is an asynchronous function that returns a Promise. This means you must wait for its response before accessing the data with response.data.stuff.
The forEach method does not support asynchronous behavior - it simply executes a callback for each element without waiting for them to finish. As a result, your result array may be empty because the axios.get calls have not yet completed.

To address this issue, you can wrap your forEach loop in a Promise to ensure it finishes before checking the result array. Additionally, use async/await with axios.get to properly handle its response:

// Initialize an empty array outside of the forEach loop.
const sumOfStuffArray = [];
const waitForEach = new Promise(resolve => {
    tagsArray.forEach(async (element, index, array) => {
       const response = await axios.get(`https://api.somewebsite.io/blahblah/stuff?tag=${element}`);
       const responseArray = response.data.stuff;
       responseArray.forEach( (anotherElement) => {
          sumOfStuffArray.push(anotherElement);
       }

       // Check if forEach has finished
       if (index === array.length - 1) {
           resolve();
       }
    });
}).then(() => {
    console.log(sumOfStuffArray);
});

Alternatively, you can utilize Promise.all with the tagsArray:

const tagsResponses = tagsArray.map(element => axios.get(`https://api.somewebsite.io/blahblah/stuff?tag=${element}`));
Promise.all(tagsResponses).then(responseArray => {
    responseArray.forEach(response => {
        sumOfStuffArray.push(response.data.stuff);
    }
}).then(() => {
    console.log(sumOfStuffArray);
});

Answer 2

There are two important points to consider:

axios.get is an asynchronous function that returns a Promise. This means you must wait for its response before accessing the data with response.data.stuff.
The forEach method does not support asynchronous behavior - it simply executes a callback for each element without waiting for them to finish. As a result, your result array may be empty because the axios.get calls have not yet completed.

To address this issue, you can wrap your forEach loop in a Promise to ensure it finishes before checking the result array. Additionally, use async/await with axios.get to properly handle its response:

// Initialize an empty array outside of the forEach loop.
const sumOfStuffArray = [];
const waitForEach = new Promise(resolve => {
    tagsArray.forEach(async (element, index, array) => {
       const response = await axios.get(`https://api.somewebsite.io/blahblah/stuff?tag=${element}`);
       const responseArray = response.data.stuff;
       responseArray.forEach( (anotherElement) => {
          sumOfStuffArray.push(anotherElement);
       }

       // Check if forEach has finished
       if (index === array.length - 1) {
           resolve();
       }
    });
}).then(() => {
    console.log(sumOfStuffArray);
});

Alternatively, you can utilize Promise.all with the tagsArray:

const tagsResponses = tagsArray.map(element => axios.get(`https://api.somewebsite.io/blahblah/stuff?tag=${element}`));
Promise.all(tagsResponses).then(responseArray => {
    responseArray.forEach(response => {
        sumOfStuffArray.push(response.data.stuff);
    }
}).then(() => {
    console.log(sumOfStuffArray);
});

What is the best way to combine arrays fetched from two different Axios API Calls?

Answer №1

Similar questions

How can I dynamically retrieve an element from an array in PHP 5?

Fan Animation in CSS

The JQuery function .remove() will not properly remove dynamically added elements

Integrate Jade mixins programmatically into an Express application using JavaScript

Browser-agnostic script proxy

There seems to be an issue with accessing the requested page,

I attempted to combine AngularJS and three.js, but unfortunately, the geometries are not appearing in the render

Leverage JavaScript to retrieve the number of active Ajax requests in JSF

Hiding elements on mobile and tablet devices using display:none in html/css

Manipulating data rows in a table using jquery

Encountering a problem with JavaScript when coding an Analog Clock

JavaScript salary calculation function not functioning properly

The callback syntax used in the TypeORM Relations decorator is completely baffling to me

Is it possible to maintain line breaks when using ".text" or ".textContent"? Any other options or solutions available? Workarounds to consider?

Conceal an absolutely positioned element outside its relatively positioned parent

"Selecting an option triggers a change in the dropdown

When the span tag is inserted into a contenteditable element on iOS Safari, the cursor automatically shifts to the

Using TypeScript to consolidate numerous interfaces into a single interface

The Selenium server is currently operational, however, it is encountering issues while attempting to establish a connection with the

The start date and end date on the Ajax calendar extender have a difference of 60 days