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
– Mathijs Segers, Commented May 10, 2017 at 5:21
Problem is, by the time all your HTTP requests finish, i is and will only be the value 4 — Phil
– Phil, Commented May 10, 2017 at 5:31
Possible duplicate of JavaScript closure inside loops – simple practical example — Phil
– Phil, Commented May 10, 2017 at 5:32
you need to learn javascript at first, instead of start from angular... — user4074041
– user4074041, Commented May 10, 2017 at 5:48

Community · Accepted Answer · 2017-05-23 10:31:16Z

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, 2017 at 10:31

CommunityBot

11 silver badge

answered May 10, 2017 at 5:29

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ved Over a year ago

How the let keyword will fix the issue. And to use let he need es6.

Mihai Alexandru-Ionut Over a year ago

let keyword declares a block scope local variable, optionally initializing it to a value and that's you needed.

Raghu Venmarathoor · Accepted Answer · 2017-05-10 05:31:54Z

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, 2017 at 5:31

Raghu Venmarathoor

8681 gold badge11 silver badges29 bronze badges

4 Comments

a better oliver Over a year ago

"javascript does not have a scope for a loop" It does.

Raghu Venmarathoor Over a year ago

@zeroflagL Confusion should be because of my poor choice of words. Javascript does not have a separate scope for loops. Am I missing something?

a better oliver Over a year ago

"Am I missing something?" Yes. JavaScript does have a separate scope for loops (iteration scope). But it requires the usage of let.

Raghu Venmarathoor Over a year ago

@zeroflagL Sorry man. I assumed that we are still in es5 era.

Pengyy · Accepted Answer · 2017-05-10 05:32:53Z

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, 2017 at 5:32

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

Collectives™ on Stack Overflow

http get method is not working in for loop in angularjs

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related