http get method is not working in for loop in angularjs

Question

hi all i am using angularjs http get method i get the values dynamically based on my loop but i am not able to get the value from http get help how to do this and solve the problem

for(i=0;i<4;i++){
    var stream =i;
    $http.get('/ViewGetBUMaterialStream/' + stream  ).then(function (response) {
                   $scope.ViewStreams[i] = response.data;
    });
}

You should probably post a bit more, oh also if you actually use + Stream that variable is not defined here, why not use the i there too — Mathijs Segers, May 10 '17 at 05:21
Problem is, by the time all your HTTP requests finish, `i` is and will only be the value `4` — Phil, May 10 '17 at 05:31
Possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Phil, May 10 '17 at 05:32
you need to learn javascript at first, instead of start from angular... — , May 10 '17 at 05:48

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

You can use let keyword. This is a usually problem for closures.

The let statement declares a block scope local variable, optionally initializing it to a value.

for(let i=0;i<4;i++){
    var stream =i;
    $http.get('/ViewGetBUMaterialStream/' + stream  ).then(function (response) {
               $scope.ViewStreams[i] = response.data;
    });
}

Another method is to use a Immediately-invoked function expression.

(function(i){
  $http.get('/ViewGetBUMaterialStream/' + Stream  ).then(function (response) 
     {
        $scope.ViewStreams[i] = response.data;
     });
})(i);

edited May 23 '17 at 10:31

Community

1
1

answered May 10 '17 at 05:29

Mihai Alexandru-Ionut

47,092
13
101
128

1

How the let keyword will fix the issue. And to use `let` he need es6. – Ved May 10 '17 at 05:31
`let` keyword declares a block scope local variable, optionally initializing it to a value and that's you needed. – Mihai Alexandru-Ionut May 10 '17 at 05:36

score 1 · Answer 2 · answered May 10 '17 at 05:31

1

This issue is caused because of javascript. Unfortunately, javascript does not have a scope for a loop, variables declared in a for loop are in a function scope. You should use an anonymous inner function and pass the value of i to that function block.

for(i=0;i<4;i++){
    var stream =i;
    (function(i){
      $http.get('/ViewGetBUMaterialStream/' + Stream  ).then(function (response) {
                   $scope.ViewStreams[i] = response.data;
      });
    })(i);
}

answered May 10 '17 at 05:31

Raghu Venmarathoor

858
11
28

_"javascript does not have a scope for a loop"_ It does. – a better oliver May 10 '17 at 07:50
@zeroflagL Confusion should be because of my poor choice of words. Javascript does not have a separate scope for loops. Am I missing something? – Raghu Venmarathoor May 10 '17 at 08:11
_"Am I missing something?"_ Yes. JavaScript does have a separate scope for loops (iteration scope). But it requires the usage of `let`. – a better oliver May 10 '17 at 08:14
@zeroflagL Sorry man. I assumed that we are still in es5 era. – Raghu Venmarathoor May 10 '17 at 08:20

score 1 · Answer 3 · answered May 10 '17 at 05:32

1

try this to bind i to your callbacks.

for(i=0;i<4;i++){
  var stream =i;
  $http.get('/ViewGetBUMaterialStream/' + stream  ).then(function (response) {
    $scope.ViewStreams[i] = response.data;
  }.bind(i));
}

answered May 10 '17 at 05:32

Pengyy

37,383
15
83
73

http get method is not working in for loop in angularjs

3 Answers3