Can't assign values to variables of objects in JavaScript [duplicate]

Question

I am trying to read a file in angular js where if the data is read successfully it will assign the content to a variable of an object else it will assign "NA" to that same variable.

function customer($scope, $http) {
    var i;
    $scope.courses = [{
        name: "CSE",
        capacity: "CSE.txt"
    }, {
        name: "IT",
        capacity: "IT.txt"
    }, {
        name: "ECE",
        capacity: "ECE.txt"
    }];

    for (i = 0; i < 3; i++)
        $http.get($scope.courses[i].capacity).then(function (success) {
            $scope.courses[i].capacity = success.data;
        }, function (error) {
            $scope.courses[i].capacity = "NA";
        });

}

var myApp = angular.module("myApp", []);
myApp.controller("customerobj", customer);

I try to access the following part in a normal table format

<td>ng-repeat="course in courses">{{course.capacity}}</td>

But every time I do that it's throwing an error: "Cannot set property 'capacity' of undefined" and showing the file names. Even though if the files are not found it is supposed to update the value to "NA". But it is not happening. Please help me out

Try to wrap your $http.get in function. Seems like issue with closures in javascript — Gangadhar Jannu
– Gangadhar Jannu, Commented Feb 16, 2017 at 5:24
@DarshakGajjar Because the error is "Cannot set property 'capacity' of undefined" which indicates that $scope.courses[i] is undefined. And because this is part of a loop it looks to me like it is a duplicate of the one I've linked — Andreas
– Andreas, Commented Feb 16, 2017 at 5:31
$scope.courses[i] is already defined in the array definition? — Siddhartha Choudhury
– Siddhartha Choudhury, Commented Feb 16, 2017 at 5:34
@SiddharthaChoudhury Can you check browser console? On which line the error is throwing? — Gangadhar Jannu
– Gangadhar Jannu, Commented Feb 16, 2017 at 5:37

Gangadhar Jannu · Accepted Answer · 2017-02-16 06:18:34Z

2

Wrap your http service call in another function like below and call that function in loop so that loop index i value will persist in function scope.

Update:

If you don't want a separate function you can use anonymous functions also

Solution 1

for (i = 0; i < 3; i++) {
    (function (index) {
        $http.get($scope.courses[index].capacity).then(function (success) {
            $scope.courses[index].capacity = success.data;
        }, function (error) {
            $scope.courses[index].capacity = "NA";
        });
    } (i))
}

Solution 2

for (i = 0; i < 3; i++) {
  serviceCall(i)
}

function serviceCall(index) {
  $http.get($scope.courses[index].capacity).then(function (success) {
    $scope.courses[index].capacity = success.data;
  }, function (error) {
    $scope.courses[index].capacity = "NA";
  });
}

edited Feb 16, 2017 at 6:18

answered Feb 16, 2017 at 5:47

Gangadhar Jannu

4,4626 gold badges33 silver badges55 bronze badges

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

4 Comments

Siddhartha Choudhury Over a year ago

It is working. Sir, if you don't mind, can you plz explain it a little bit?

Gangadhar Jannu Over a year ago

@SiddharthaChoudhury It is called as closure. If you put the function outside of the loop, each index variable is bound to the function otherwise they will share the same variable. I would recommend to have a look on closure inside loops

Andreas Over a year ago

That's the solution of the duplicate. You should instead have voted to close this one as a dupe...

Gangadhar Jannu Over a year ago

@Andreas Though the underlying concept is similar, OP was unable to understand the context even after we both commented. Then only I had given answer.

Prasanth Bendra · Accepted Answer · 2017-02-16 06:20:21Z

1

Use let in for loop

for (let i = 0; i < 3; i++) { 
...... 
}

Ref:

http://caniuse.com/#search=let https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/let

answered Feb 16, 2017 at 6:20

Prasanth Bendra

33.2k9 gold badges56 silver badges74 bronze badges

Comments

seyfside · Accepted Answer · 2017-02-16 06:26:50Z

0

code is corret. but for loop is not. when you add console.log(i) to error function you see 3. but your array has 3 member. http request is async. for loop can not wait its response. use Gangadhar Jannu solution.

edited Feb 16, 2017 at 6:26

answered Feb 16, 2017 at 6:00

seyfside

1271 silver badge7 bronze badges

Comments

nishant agrawal · Accepted Answer · 2017-02-16 07:27:06Z

0

I think using let in for loop is the much better approach to handle this type of cases. Let in the loop can re-binds it to each iteration of the loop, making sure to reassign it the value from the end of the previous loop iteration, so it can be used to avoid issue with closures

for (let i = 0; i<3;i++) {

}

everytime when async code inside for loop will be executed it will get correct value of i

answered Feb 16, 2017 at 7:27

nishant agrawal

4712 silver badges7 bronze badges

Collectives™ on Stack Overflow

Can't assign values to variables of objects in JavaScript [duplicate]

4 Answers 4

Update:

Solution 1

Solution 2

4 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Update:

Solution 1

Solution 2

4 Comments

Comments

Comments

Comments

Linked

Related