Sending post request in for loop

Question

I would like to send post requests in loop. If i send for example 2 requests in a row only the last request really made the callback. What am i do wrong? ``` this.assignAUnits = function(){ var currentIncidentId = this.incident.incidentId; for (var i=0; i< this.selectedAvailableUnits.length; i++){ var unit = this.selectedAvailableUnits[i]; var unitId = unit.unitId; var url = '/incident/' + currentIncidentId + '/assignUnit/' + unitId $http.post(url).then(function(response) { DOING SOMETHING }, function(error) { alert(error); }); } }; ```

Accepted Answer

Use a `closure`. Let me show you a simple example

```
// JavaScript on Client-Side
window.onload = function() {
    var f = (function() {
        for (i = 0; i < 3; i++) {
            (function(i){
                var xhr = new XMLHttpRequest();
                var url = "closure.php?data=" + i;
                xhr.open("GET", url, true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        console.log(xhr.responseText); // 0, 1, 2 
                    }
                };
                xhr.send();
            })(i);
        }
    })();
};

// Server-Side (PHP in this case)
<?php 
    echo $_GET["data"];
?>
```

In your case... wrap the asynchronous call/function with a closure

```
for (var i=0; i< this.selectedAvailableUnits.length; i++) {

(function(i) {    // <--- the catch

var unit = this.selectedAvailableUnits[i];
        var unitId = unit.unitId;
        var url = '/incident/' + currentIncidentId + '/assignUnit/' + unitId
        $http.post(url).then(function(response) {
            // DOING SOMETHING
        }, function(error) {
            alert(error);
        });

})(i);    // <---- (the i variable might be omitted if it's not needed)

}
```

The section below is not directly related to the question but rather to the comments related to this answer.

The example submitted on jsFiddle mentioned in the comments and shown below is buggy and as such it doesn't prove anything.

It's true that this snippet, even not using a closure, yields 'Hello Kitty' three times; actually, if you replace `console.log()` method with the an `alert()` one you will see that it yields 'Hello Kitty' six, nine or even twelve times. So, what the hell is going one ;) how it's possible to get the alert window popping up six, nine or twelve times within a loop of three iterations?!

```
// your example (a)                                   // my comments 
//
var f = (function() {
    for (i = 0; i < 3; i++) {
        //(function(){                                // this way you can't have multiple scopes 
            var xhr = new XMLHttpRequest();
            var url = "closure.php?data=your-data";   // use /echo/html/ for testing on jsfiddle.net
            xhr.open("GET", url, true);               // use POST for testing on jsfiddle.net 
            xhr.onreadystatechange = function () {    // this way you might catch all readyStage property values
                callback();                           // this way the callback function will be called several times
            };
            xhr.send();
        //})();
    }
})();

var callback = function() {
    console.log("Hello Kitty"); // or use alert("Hello Kitty");
};
```

Output:

```
GET http://fiddle.jshell.net/_display/closure.php?data=your-data 404 (NOT FOUND) 
(9) Hello Kitty
```

As you could see, we've got an error and nine 'Hello Kitty' outputs in a row :) Before I change the function above let's see two important thing

First

`onreadystatechange` event stores a function or a reference to be called automatically each time the `readyState` property changes while `status` property holds the status of the XMLHttpRequest object.

`readyState` property possible values

- 0: request not initialized

- 1: server connection established

- 2: request received

- 3: processing request

- 4: request finished and response is ready

`status` property possible values

- 200: OK

- 404: Page not found

Second

As I said in the comments, jsfiddle.net isn't reliable for testing asynchronous snippets without some changes. In other words the `GET` method should be changed to `POST` and the `url` property must be changed to this link `/echo/html/` (for more options take a look at jsFiddle documentation)

Now, let's change the example from the above (and follow the comments within the code)

```
// corrected example (b)
//
var f = (function() {
    for (i = 0; i < 3; i++) {
        //(function(i){                                              // uncomment this line for the 3rd output                               
            var xhr = new XMLHttpRequest();
            var url = "/echo/html";
            var data = "data";
            xhr.open("POST", url, true);
            xhr.onreadystatechange = function () {
                //if (xhr.readyState == 4 && xhr.status == 200) {    // uncomment this line for the 4th output
                    callback(i, xhr.readyState);                     // uncomment this line for the 4th output
                //}
            };
            xhr.send(data);
        //})(i);                                                     // uncomment this line for the 3rd output
    }
})();

var callback = function(i, s) {
    console.log("i=" + i + " - readyState=" + s + " - Hello Kitty");
};
```

1st output: // six outputs

```
(4) i=3 - readyState=1 - Hello Kitty    // four outputs related to readyState value 'server connection established'…

Sending post request in for loop

Solution

Problem

Related problems