Guide to creating several AJAX requests using a for loop

Question

Guide to creating several AJAX requests using a for loop

I'm currently experimenting with the Star Wars API (SWAPI) and attempting to display the names of all the planets. However, the planet information is spread across multiple pages. How can I go about making several AJAX requests in order to retrieve and display all of the data? Take a look at my code snippet below:

for (var i = 1; i <= 7; i++) {
    var xhr = new XMLHttpRequest();
    var link = 'https://swapi.co/api/planets/';
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var planets = JSON.parse(xhr.responseText);
            var responseHTML = '<p>';
            for (i in planets.results) {
                responseHTML += planets.results[i].name;
            }
            responseHTML += planets.results[1];
            responseHTML += '</p>';
            //console.log(planets.results.length);
        }
        document.querySelector('main').innerHTML = responseHTML;
    };
    xhr.open('GET', link);
    xhr.send();
    link += '?page=' + i;
}

javascript ajax

Answer 1

Answer №1

Opting for a recursive function instead of a loop can ensure that each request is processed sequentially, waiting for the response before triggering the next one. This helps to maintain the order of results as expected, unlike with loops.

Additionally, utilizing fetch for making requests is recommended, as it represents a more modern approach to handling AJAX requests.

Below is an example of code implementing this concept:

// initialize index
let index = 0;

const performAjaxRequest = index => {
  // execute fetch request only if index is less than 7
  if (index < 7) {
    index++;

    // make fetch call with updated index in the URL
    fetch(`https://swapi.co/api/planets/?page=${index}`).then(res => {
       return res.json();
    }).then(res => {

       // display each country from the response on the screen
       for (var i = 0; i < res.results.length; i++) {
         document.body.append(res.results[i].name + ', ');
       }
       
       // recursion occurs here by calling the function again after receiving response
       performAjaxRequest(index);
    })
  }
}

// initiate the first call to the function
performAjaxRequest(index);

Answer 2

Opting for a recursive function instead of a loop can ensure that each request is processed sequentially, waiting for the response before triggering the next one. This helps to maintain the order of results as expected, unlike with loops.

Additionally, utilizing fetch for making requests is recommended, as it represents a more modern approach to handling AJAX requests.

Below is an example of code implementing this concept:

// initialize index
let index = 0;

const performAjaxRequest = index => {
  // execute fetch request only if index is less than 7
  if (index < 7) {
    index++;

    // make fetch call with updated index in the URL
    fetch(`https://swapi.co/api/planets/?page=${index}`).then(res => {
       return res.json();
    }).then(res => {

       // display each country from the response on the screen
       for (var i = 0; i < res.results.length; i++) {
         document.body.append(res.results[i].name + ', ');
       }
       
       // recursion occurs here by calling the function again after receiving response
       performAjaxRequest(index);
    })
  }
}

// initiate the first call to the function
performAjaxRequest(index);

Answer 3

Answer №2

$('.checkbox:checkbox:checked').each(function (i, el) {
  $.ajax({
   // include your specific ajax code here
  });
});

The code above targets a group of checked checkboxes and sends data for each one that is checked.

Answer 4

$('.checkbox:checkbox:checked').each(function (i, el) {
  $.ajax({
   // include your specific ajax code here
  });
});

The code above targets a group of checked checkboxes and sends data for each one that is checked.

Answer 5

Answer №3

The challenge presented here lies in the unpredictability of when the asynchronous requests will be completed, making it difficult to know when the process will finish. My approach to solving this issue is by using recursive functions, where each call of the function includes different parameters to make the next request.

If your goal is to store the responses of all these requests in a variable named "responseHTML," you can follow a structure similar to the one below:

var link = 'https://swapi.co/api/planets/';
var responseHTML = "";
makeRequest(1, 7, link);

function makeRequest(index, max, link) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var planets = JSON.parse(xhr.responseText);
            responseHTML += '<p>';
            for (i in planets.results) {
                responseHTML += planets.results[i].name;
            }
            responseHTML += planets.results[1];
            responseHTML += '</p>';
        }

        if (index <= max) {
            link += '?page=' + i;
            index++;
            makeRequest(index++, max, link);
        } else {
            // All requests have been processed, so I display the responseHTML and terminate the code.
            document.querySelector('main').innerHTML = responseHTML;
        }
    };
    xhr.open('GET', link);
    xhr.send();
}

Answer 6

The challenge presented here lies in the unpredictability of when the asynchronous requests will be completed, making it difficult to know when the process will finish. My approach to solving this issue is by using recursive functions, where each call of the function includes different parameters to make the next request.

If your goal is to store the responses of all these requests in a variable named "responseHTML," you can follow a structure similar to the one below:

var link = 'https://swapi.co/api/planets/';
var responseHTML = "";
makeRequest(1, 7, link);

function makeRequest(index, max, link) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var planets = JSON.parse(xhr.responseText);
            responseHTML += '<p>';
            for (i in planets.results) {
                responseHTML += planets.results[i].name;
            }
            responseHTML += planets.results[1];
            responseHTML += '</p>';
        }

        if (index <= max) {
            link += '?page=' + i;
            index++;
            makeRequest(index++, max, link);
        } else {
            // All requests have been processed, so I display the responseHTML and terminate the code.
            document.querySelector('main').innerHTML = responseHTML;
        }
    };
    xhr.open('GET', link);
    xhr.send();
}

Guide to creating several AJAX requests using a for loop

Answer №1

Answer №2

Answer №3

Similar questions

Steps for implementing remote modals in Bootstrap 5 using CS HTML

Unable to retrieve the /socket.io/socket.io.js file in the client-side application

Utilizing GraphicsMagick with Node.js to Extract Page Frames from Multi-Page TIF Files

Contrasting results when logging an element in Chrome versus IE

Tips for refreshing a specific div element at set intervals using JQuery AJAX?

Exploring the world of jQuery and Ajax: Experimenting with implementing a POST method through Ajax and retrieving the response in HTML

What's preventing me from using the left click function on my published blog post?

Error: The variable 'err' is not declared in this scope.at line app.post

The replace function fails to recognize Cyrillic characters when combined with the /b flag

javascript unable to delete cookie

The select2 option seems to be malfunctioning as it is not

How can I display components using Angular CLI 5 without any visual output?

What could be the reason for the inability to install Angular JS 2?

html and css code to create a linebreak ↵

Retrieving information from Odoo using Ajax and displaying it in HTML

Issue encountered when attempting to invoke a service from an Angular component within an office.js dialog

What about a Comet solution using a PHP socket server?

Guide on incorporating the ":gt" filter from sizzle into vanilla javascript

Determine the total value derived from adding two option values together

Executing various axios requests to retrieve diverse data and populating multiple sections of the user interface in React Native