Using the for loop to asynchronously fetch data and access the finished result variable

Question

Using the for loop to asynchronously fetch data and access the finished result variable

Exploring the world of asynchronous JavaScript, I find myself pondering a question: how can I ensure that my code only starts working on a created array once all queries are completed? My current approach involves fetching pages in a for loop. Here's a snippet of my code:

var allOrgReposData = [];
var repoContributorsUrls = [];
for (var i=1; i <= orgPageIterations; i++) {
  var orgReposUrl = 'https://api.github.com/orgs/angular/repos?page='+i;
  fetch(orgReposUrl)
  .then(response => response.json())
  .then(orgReposData => {
    allOrgReposData = allOrgReposData.concat(orgReposData);
    console.log(allOrgReposData);
   })
}

In this code snippet, you'll notice that the allOrgReposData array is being populated within the for loop. However, any operations I try to perform on this array end up being multiplied with each iteration, leading to unexpected results. For example, with 30 items per page, I see calculations like 30; 60; 90; 120; 150; 171 equating to 621 instead of the expected 171.

Is there a way to pause execution until all data is fetched and avoid this "multiplication" effect?

Warm regards!

javascript json asynchronous

Answer 1

Answer №1

One way to handle multiple promises is using Promise.all, which will ensure all promises are completed before proceeding:

var allOrgReposData = [];
var repoContributorsUrls = [];

var promises = [];
let orgPageIterations = 1;

for (var i = 1; i <= orgPageIterations; i++) {
  let orgReposUrl = 'https://api.github.com/orgs/angular/repos?page=' + i;
  promises.push(fetch(orgReposUrl).then(response => response.json()));
}

Promise.all(promises)
  .then(data => {
    allOrgReposData = data;
    console.log(allOrgReposData);
  })
  .catch(err => console.error(err));

It's worth noting that I've made the change from var orgReposUrl to let orgReposUrl for better block scoping.

Answer 2

One way to handle multiple promises is using Promise.all, which will ensure all promises are completed before proceeding:

var allOrgReposData = [];
var repoContributorsUrls = [];

var promises = [];
let orgPageIterations = 1;

for (var i = 1; i <= orgPageIterations; i++) {
  let orgReposUrl = 'https://api.github.com/orgs/angular/repos?page=' + i;
  promises.push(fetch(orgReposUrl).then(response => response.json()));
}

Promise.all(promises)
  .then(data => {
    allOrgReposData = data;
    console.log(allOrgReposData);
  })
  .catch(err => console.error(err));

It's worth noting that I've made the change from var orgReposUrl to let orgReposUrl for better block scoping.

Answer 3

Answer №2

To keep a record of the number of calls made, you can use a variable:

var allOrgReposData = [];
var repoContributorsUrls = [];
var callCounter = 1; //Variable to track ajax calls
for (var i=1; i <= orgPageIterations; i++) {
  var orgReposUrl = 'https://api.github.com/orgs/angular/repos?page='+i;
  fetch(orgReposUrl)
  .then(response => response.json())
  .then(orgReposData => {
    allOrgReposData = allOrgReposData.concat(orgReposData);
    console.log(allOrgReposData);
    callCounter++; //Increment counter for each call

    if(callCounter == orgPageIterations){ //If all calls have been completed, proceed
      //DO YOUR TASK HERE
    }
   })
}

Answer 4

To keep a record of the number of calls made, you can use a variable:

var allOrgReposData = [];
var repoContributorsUrls = [];
var callCounter = 1; //Variable to track ajax calls
for (var i=1; i <= orgPageIterations; i++) {
  var orgReposUrl = 'https://api.github.com/orgs/angular/repos?page='+i;
  fetch(orgReposUrl)
  .then(response => response.json())
  .then(orgReposData => {
    allOrgReposData = allOrgReposData.concat(orgReposData);
    console.log(allOrgReposData);
    callCounter++; //Increment counter for each call

    if(callCounter == orgPageIterations){ //If all calls have been completed, proceed
      //DO YOUR TASK HERE
    }
   })
}

Using the for loop to asynchronously fetch data and access the finished result variable

Answer №1

Answer №2

Similar questions

Show popup window during servlet processing

How to fetch images from a database in CodeIgniter by utilizing JSON and AJAX functions?

Guide on how to submit an image along with text using AJAX, PHP, and HTML

Overlay a small image on top of a larger background image using canvas, then merge them into a single set of pixel

Cipher/decipher URL Redirect Parameter

Guide to setting up a datePicker in a cellEditorSelector

How can I create multiple divs that look alike?

I encounter an error while attempting to deserialize a JSON string, making it impossible to

Experience a dynamic D3 geometric zoom effect when there is no SVG element directly underneath the cursor

Why won't my JavaScript addEventListener activate on form submission?

What is the best way to transfer information from the window method to the data function in a Vue.js application?

Is there a way to modify the appearance of a particular element in ng-repeat?

Methods for delivering static resources on multiple routes in Express JS

Error in Babel-Loader when executing npm run build

Upon clicking, the input texts revert to their original default values

What could be causing the block to fail in the event of an AJAX request?

Avoid running multiple YouTube views simultaneously within an AngularJS application

Error encountered when attempting to retrieve HTML content from localhost using AJAX

executing npm tasks concurrently

Having trouble finishing the npm installation process