What is the best way to execute ajax for a collection of objects?

Question

What is the best way to execute ajax for a collection of objects?

I'm grappling with the effectiveness of my ajax implementation as I cycle through an array of data using a for loop:

loadProfiles.js

var tempString = "";
var searchPeople = function(sv){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if(xhttp.readyState == 4 && xhttp.status == 200){
            tempString = xhttp.responseText;
            loadPeople(tempString, sv);
        }
    }

    var searchvalue = sv;
    searchvalue = searchvalue.join(" ");

    xhttp.open("GET", "php/searchProfiles.php?searchvalue=" + searchvalue, true);
    xhttp.send();
}

var loadPeople = function(people, sv){
    loadedPeople = [];
    var normList = people.split(",");
    var list = people.toLowerCase().split(",");
    list.splice(list.length - 1, 1);
    var zsearch = sv;
    for(var i = 0; i < list.length; i++){
        loadedImageId[i] = list[i].split("_")[1];
        if(loadedImageId[i] == 0){
            loadedImageId[i] = "images/GrayProfilePic.png";
        }
        else{///////////////////////////////////This is what I need to fix
            var grabPic = new XMLHttpRequest();
            grabPic.onreadystatechange = function(){
                if(grabPic.readyState == 4 && grabPic.status == 200){
                    console.log("ready to go");
                    loadedImageId[i] = grabPic.responseText;
                    if(loadedImageId[i] == "Error1"){
                        loadedImageId[i] = "images/GrayProfilePic.png";
                    }
                }
            }

            grabPic.open("GET", "php/grabProfPics.php?imageid=" + loadedImageId[i], true);
            grabPic.send();
        }//////////////////////////////////////////////
        list[i] = list[i].split("_")[0];
        for(var j = 0; j < zsearch.length; j++){
            if(list[i].indexOf(zsearch[j]) > -1){
                if(loadedPeople.indexOf(list[i]) == -1){
                    if(loadedPeople.indexOf(normList[i].split("_")[0]) == -1){
                        loadedPeople.push(normList[i].split("_")[0]);
                    }
                }
            }
        }
    }
    console.log(loadedPeople);
    console.log(loadedImageId);

}

searchProfiles.php

$query = "SELECT username, imageid FROM `memberHandler`";
    $result = mysqli_query($connect, $query) or die("Could not query");
    while($row = mysqli_fetch_assoc($result)){
        echo $row['username'] . "_" . $row['imageid'] . ",";
    }

grabProfPics.php

$query = "SELECT image, mime_type FROM memberProfilePictures WHERE `id`='$imageid'";
    $result = mysqli_query($connect, $query);
    if(mysqli_num_rows($result) != 0){
        $row = mysqli_fetch_assoc($result);

        $imagesrc = $row['image'];
        $imagesrc = base64_encode($imagesrc);
        $imagetype = $row['mime_type'];

        echo "data:" . $imagetype . ";base64," . $imagesrc . "";
    }
    else{
        echo "Error1";
    }

One issue I'm facing is that the server's response time can cause the for loop iteration variable 'i' to be different by the time the callback is executed. Is there a more efficient way to handle this and dynamically update the array based on its current value? Thank you for any insights =)

In essence, I'm attempting to iterate over image IDs and if it's non-zero (indicating they have a profile image set), then making an ajax request to fetch the corresponding image from a database. Subsequently, updating the array with the retrieved image source. Apologies for any earlier ambiguity in my explanation.

javascript arrays ajax for-loop

Answer 1

Answer №1

Update on Original Post: I initially provided this response without seeing your complete code pasted in. While my advice still holds, here are some additional thoughts to consider:

It appears that you are directly inserting data into SQL query strings. Although it may make "Little Bobby Tables" proud (reference: XKCD comic), you should take precautions against SQL injection.
If you prefer writing the standard new XMLHttpRequest(); code yourself instead of utilizing a library like fetch or jQuery, consider encapsulating it within a function that handles URL, data, method, success callback, and error callback parameters. Utilizing libraries can simplify and optimize your code.
In the specific error segment you highlighted, the issue lies with the outdated value of i, which no longer aligns with the index used in the corresponding call.

The sense of asynchronicity explained:

Asynchronous Nature

You touch upon managing asynchronous tasks, such as AJAX calls, in your discussion.

Various approaches exist for addressing this challenge, including the use of callbacks and promises.

While synchronous processing is feasible, favoring asynchronous operations, particularly for substantial applications, proves beneficial.

Illustrative Example

Let's define a hypothetical service. Though in this instance it remains locally hosted, the underlying concept holds true. You input a parameter (e.g., profile ID) and receive an output (profile image URL).

// After ~1-2 seconds, determine if the input number is even or odd
var checkEvennessAsync = function(num, cb) {
  setTimeout(function(){
    var isEven = num % 2 === 0;
    cb(num + " is " + (isEven ? "Even" : "Odd"));
  },(Math.floor(Math.random() * 12) + 3) * 150);
};

Although diverse signature formats exist, the essence remains consistent — entering data triggers a brief delay followed by a response.

For instance:

checkEvennessAsync(2,console.log);
checkEvennessAsync(3,console.log);
checkEvennessAsync(7,console.log);

This sequence could yield:

"7 is Odd"
"2 is Even"
"3 is Odd"

Here's our test dataset:

var infoBatch = [
  10,11,12,
];

To dispatch our data to the service and fetch results accordingly, we can employ a simple iterator loop approach (Note: This serves demonstration purposes only. Real-world scenarios often warrant reliance on promises).

var retrieveInfoResponses = function(infoBatch, cb) {
  var responsesCollection = [];
  infoBatch.forEach(function(i){
    checkEvennessAsync(i,function(response){
      console.log("Assessment for " + i + ": " + response);
      responsesCollection.push({num:i,response:response});
      if (responsesCollection.length >= infoBatch.length){
        cb(responsesCollection);
      }
    });
  });
};

Note that the encompassing function for all asynchronous calls operates asynchronously itself (under the callback mechanism), necessitating a 'done' callback.

Expanding on this:

Upon initializing a container array for result accumulation, iterate through each data item within the information array:

var responsesCollection = [];
infoBatch.forEach(function(i){

For every element, initiate an asynchronous request.

checkEvennessAsync(i,function(response){

Demonstrate the receipt of data from the extended operation for every element alongside their console outputs, storing both the outcomes and original data inside the responses collection. Maintaining source data proves vital in certain cases (e.g., correlating profile IDs with respective URLs) where order retention may not hold merit given the inherent unpredictability of async calls.

console.log("Feedback for " + i + ": " + response);
responsesCollection.push({num:i,response:response});

Subsequently, examine parity between received responses and issued requests. If equality stands unachieved, signifying pending results, halt the process. Conversely, if correspondence prevails, invoke the primary callback and convey the comprehensive dataset back to the initiating party.

if (responsesCollection.length >= infoBatch.length){
  cb(responsesCollection);
}

An invocation such as:

retrieveInfoResponses(infoBatch,console.log);

could return outcomes along these lines:

"Analysis for 10: 10 is Even"
"Analysis for 12: 12 is Even"
"Analysis for 11: 11 is Odd"
[[object Object] {
  num: 10,
  response: "10 is Even"
}, [object Object] {
  num: 12,
  response: "12 is Even"
}, [object Object] {
  num: 11,
  response: "11 is Odd"
}]

Promising Future

This model concentrates solely on exploring handling methods for asynchronous actions and does not address nuanced production considerations such as error mitigation since Ajax calls possess intrinsic failure potential.

Conventionally emphasized by CallMeNorm, delving into the realm of promises presents significant advancement possibilities albeit requiring separate dedicated discourse.

Answer 2

Update on Original Post: I initially provided this response without seeing your complete code pasted in. While my advice still holds, here are some additional thoughts to consider:

It appears that you are directly inserting data into SQL query strings. Although it may make "Little Bobby Tables" proud (reference: XKCD comic), you should take precautions against SQL injection.
If you prefer writing the standard new XMLHttpRequest(); code yourself instead of utilizing a library like fetch or jQuery, consider encapsulating it within a function that handles URL, data, method, success callback, and error callback parameters. Utilizing libraries can simplify and optimize your code.
In the specific error segment you highlighted, the issue lies with the outdated value of i, which no longer aligns with the index used in the corresponding call.

The sense of asynchronicity explained:

Asynchronous Nature

You touch upon managing asynchronous tasks, such as AJAX calls, in your discussion.

Various approaches exist for addressing this challenge, including the use of callbacks and promises.

While synchronous processing is feasible, favoring asynchronous operations, particularly for substantial applications, proves beneficial.

Illustrative Example

Let's define a hypothetical service. Though in this instance it remains locally hosted, the underlying concept holds true. You input a parameter (e.g., profile ID) and receive an output (profile image URL).

// After ~1-2 seconds, determine if the input number is even or odd
var checkEvennessAsync = function(num, cb) {
  setTimeout(function(){
    var isEven = num % 2 === 0;
    cb(num + " is " + (isEven ? "Even" : "Odd"));
  },(Math.floor(Math.random() * 12) + 3) * 150);
};

Although diverse signature formats exist, the essence remains consistent — entering data triggers a brief delay followed by a response.

For instance:

checkEvennessAsync(2,console.log);
checkEvennessAsync(3,console.log);
checkEvennessAsync(7,console.log);

This sequence could yield:

"7 is Odd"
"2 is Even"
"3 is Odd"

Here's our test dataset:

var infoBatch = [
  10,11,12,
];

To dispatch our data to the service and fetch results accordingly, we can employ a simple iterator loop approach (Note: This serves demonstration purposes only. Real-world scenarios often warrant reliance on promises).

var retrieveInfoResponses = function(infoBatch, cb) {
  var responsesCollection = [];
  infoBatch.forEach(function(i){
    checkEvennessAsync(i,function(response){
      console.log("Assessment for " + i + ": " + response);
      responsesCollection.push({num:i,response:response});
      if (responsesCollection.length >= infoBatch.length){
        cb(responsesCollection);
      }
    });
  });
};

Note that the encompassing function for all asynchronous calls operates asynchronously itself (under the callback mechanism), necessitating a 'done' callback.

Expanding on this:

Upon initializing a container array for result accumulation, iterate through each data item within the information array:

var responsesCollection = [];
infoBatch.forEach(function(i){

For every element, initiate an asynchronous request.

checkEvennessAsync(i,function(response){

Demonstrate the receipt of data from the extended operation for every element alongside their console outputs, storing both the outcomes and original data inside the responses collection. Maintaining source data proves vital in certain cases (e.g., correlating profile IDs with respective URLs) where order retention may not hold merit given the inherent unpredictability of async calls.

console.log("Feedback for " + i + ": " + response);
responsesCollection.push({num:i,response:response});

Subsequently, examine parity between received responses and issued requests. If equality stands unachieved, signifying pending results, halt the process. Conversely, if correspondence prevails, invoke the primary callback and convey the comprehensive dataset back to the initiating party.

if (responsesCollection.length >= infoBatch.length){
  cb(responsesCollection);
}

An invocation such as:

retrieveInfoResponses(infoBatch,console.log);

could return outcomes along these lines:

"Analysis for 10: 10 is Even"
"Analysis for 12: 12 is Even"
"Analysis for 11: 11 is Odd"
[[object Object] {
  num: 10,
  response: "10 is Even"
}, [object Object] {
  num: 12,
  response: "12 is Even"
}, [object Object] {
  num: 11,
  response: "11 is Odd"
}]

Promising Future

This model concentrates solely on exploring handling methods for asynchronous actions and does not address nuanced production considerations such as error mitigation since Ajax calls possess intrinsic failure potential.

Conventionally emphasized by CallMeNorm, delving into the realm of promises presents significant advancement possibilities albeit requiring separate dedicated discourse.

Answer 3

Answer №2

The current example provided will likely result in errors.

information[i] does not include a method called doAjaxstuff. However, achieving what you are aiming for can be easily accomplished using Promises which are now supported in modern browsers and even jQuery 3.0 has an implementation that is compliant. In this scenario, you could implement the following code:

var promises = information.map(function(data, idx) {
    // The doAjaxstuff function should return a promise
    return Promise.resolve([idx, doAjaxstuff(data)]);
});

var orderedPromises = promises.reduce(function(acc, val) {
        return acc[val[0], val[1]];
    }, []);
});

Promise.all(orderedPromises)
.then(function(result) {
   // Implement your functionality here
});

Answer 4

The current example provided will likely result in errors.

information[i] does not include a method called doAjaxstuff. However, achieving what you are aiming for can be easily accomplished using Promises which are now supported in modern browsers and even jQuery 3.0 has an implementation that is compliant. In this scenario, you could implement the following code:

var promises = information.map(function(data, idx) {
    // The doAjaxstuff function should return a promise
    return Promise.resolve([idx, doAjaxstuff(data)]);
});

var orderedPromises = promises.reduce(function(acc, val) {
        return acc[val[0], val[1]];
    }, []);
});

Promise.all(orderedPromises)
.then(function(result) {
   // Implement your functionality here
});

Answer 5

Answer №3

When making Ajax calls, it's important to remember that they are asynchronous in nature, meaning they will not wait for other processes like a for loop to finish before continuing. If you need the iteration to pause and only resume once the ajax call returns, you must set it to be synchronous.

To achieve this, simply include async: false

For further details, refer to the jquery documentation

Answer 6

When making Ajax calls, it's important to remember that they are asynchronous in nature, meaning they will not wait for other processes like a for loop to finish before continuing. If you need the iteration to pause and only resume once the ajax call returns, you must set it to be synchronous.

To achieve this, simply include async: false

For further details, refer to the jquery documentation

What is the best way to execute ajax for a collection of objects?

Answer №1

Asynchronous Nature

Illustrative Example

Promising Future

Answer №2

Answer №3

Similar questions

What is the best way to incorporate two range sliders on a single webpage?

Best practices for securely storing access tokens in React's memory

`Firefoxx border table glitch`

Invoke a bounded function within an Angular directive using the ng-click event

Express routes are malfunctioning

Problem encountered while retrieving data

the correct data format for posting using axios

In Javascript, use the replace() function to target and replace text that is not contained

Utilizing the W3Schools CodeColor library across various elements

Utilizing AJAX to Invoke a Method in a CS Page: A Step-By-

Slick slider issue: Unexpected TypeError - the slick method is undefined for o[i]

When updating items in a FormView, the Dropdownlist may still hold the previous values

What is the process of retrieving user input from an HTML form and locating specific data within it?

Searching and selecting columns in React using Material-UI

Verification of unique custom string

Exploring the passing of parameters in Angular JS getters

What's the best way to create an onclick event for a li element that includes a pseudo-element ::before

Sending an AJAX request from JavaScript to a user control in ASP.NET

Deciphering the ins and outs of the jQuery each function - Surprising

Updating the state of a parent component from a slot in VueJS