Can't access variable inside angular.js controller

Question

This is my controller:

app.controller("PlaceController", ['$http', function($http){

    this.places = shops;
    var hotels = this;
    hotels.objects = [];
    this.spots = new Array;

    this.newPlace = {};

    this.city = new String();

    this.addPlace = function() {
        this.places.push(this.newPlace);
        this.newPlace = {};

        var request = *some query syntax, sorry for hiding*

        $http.get(request).success(function(data) {
            hotels.objects = data;
            console.log(hotels.objects.elements);
        });

        for (each in hotels.objects.elements) {
          this.spots.push(each.tags.name);
        };

        console.log(this.spots);

}}] );

I get an empty array when I log this.spots to the console. The http request etc work perfectly because the console.log(hotels.objects.elements) statement works perfectly.

Because of this problem, I can't output it into my HTML either. What should I do?

$http.get is async, so when you do for loop hotels.objects is empty array — Grundy
– Grundy, Commented Jul 22, 2015 at 12:52
this.spots = new Array; should be this.spots = new Array(); — Dread Boy
– Dread Boy, Commented Jul 22, 2015 at 12:52

sma · Accepted Answer · 2015-07-22 12:54:31Z

3

You are issuing an asynchronous request to get the spots, but you're logging them before they complete.

Change this.addPlace to log / act on the spots array inside the promise callback:

this.addPlace = function() {
    this.places.push(this.newPlace);
    this.newPlace = {};

    var request = *some query syntax, sorry for hiding*

    $http.get(request).success(function(data) {
        hotels.objects = data;
        console.log(hotels.objects.elements);

        for (each in hotels.objects.elements) {
          this.spots.push(each.tags.name);
        };

        console.log(this.spots);
    });

answered Jul 22, 2015 at 12:54

sma

9,5978 gold badges53 silver badges83 bronze badges

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

4 Comments

AMAN AGARWAL Over a year ago

Are you sure that "this.spots" will still work inside of the http request function? The console gives me an error saying "TypeError: Cannot read property 'push' of undefined", is there a way around that?

Vale Over a year ago

this doesn't refer to the same item inside the callback, it should be hotels in this case.

AMAN AGARWAL Over a year ago

@Sosdoc even replacing "this" with "hotels" doesn't work here. Earlier it couldn't read the property 'push', now it can't read 'name'. Why does that give the same error but for different properties if I change 'this.spots' to 'hotels.spots'?

Vale Over a year ago

@AMANAGARWAL it's the same problem I was discussing in my answer, the way you used the for-in was wrong as it was iterating on property names, each doesn't refer to items but just names.

Vale · Accepted Answer · 2015-07-23 13:23:58Z

1

You're adding to the spots array before the ajax request is done, move your calls to push inside the callback:

$http.get(request).success(function(data) {
        hotels.objects = data;
        console.log(hotels.objects.elements);
        angular.forEach(hotels.objects.elements, function(value) {
                hotels.spots.push(value.tags.name);
        });
});

Also, you should really be using $scope instead of references to this. This would simplify your code a bit, without needing to rename this to hotels

full controller code using $scope

app.controller("PlaceController", ['$scope', '$http', function($scope, $http){
    $scope.places = shops;    
    $scope.objects = [];
    $scope.spots = new Array;
    $scope.newPlace = {};
    $scope.city = new String();

    $scope.addPlace = function() {
        $scope.places.push($scope.newPlace);
        $scope.newPlace = {};

        var request = *some query syntax, sorry for hiding*

        $http.get(request).success(function(data) {
            $scope.objects = data;
            console.log($scope.objects.elements);

            angular.forEach($scope.objects.elements, function(value, key) {
                $scope.spots.push(value.tags.name);
            });
            // spots is ready, log it, do whatever
            console.log($scope.spots);
        });       
}}] );

NOTE: Using $scope means you won't need to call this from your html to reference the objects and functions defined in your controller.

An example:

<div ng-controller="PlaceController">
    <!-- no need to call places.city, if you use $scope just write city -->
    {{city}}
</div>

EDIT: You probably shouldn't use JavaScript's for-in, the problem with it is that it iterates on the names or indexes of your objects/arrays.

An example:

var someArray = ['a', 'b', 'c'];
for (i in someArray) {
   console.log(i); // prints 0, 1, 2
   console.log(someArray[i]); // prints 'a', 'b', 'c'
}

This is different from any for-in/for-each implementation in other popular languages.

Anyway, in this case I've edited the code above to use Angular's forEach, which is a more appropriate solution (many libraries implement custom for-each functions to fix JS's weird for-in) You can read more in Angular's docs

Another option, in plain javascript is, if $scope.objects.elements is an array, using the map() function, like this:

$scope.spots = $scope.objects.elements.map(function(value) {
    return value.tags.name; // value is an item in object.elements
});

edited Jul 23, 2015 at 13:23

answered Jul 22, 2015 at 13:01

Vale

2,0621 gold badge18 silver badges22 bronze badges

7 Comments

Grundy Over a year ago

in angular2 not use scope and for migration suggest use controller as syntax

Vale Over a year ago

Angular2 isn't released yet and given that it's going to be incompatible anyway, regardless if you use $scope or not, I don't see the issue.

Dan Over a year ago

angular2 is in developer preview at the moment it does not make sense to base production code off of it or even prefer to work in it right now

AMAN AGARWAL Over a year ago

Hey Sosdoc, I tried it! But it's causing another problem. I get an error saying that the 'name' property can't be accessed in the "$scope.spots.push(each.tags.name)" line. I didn't receive that error in my original code, what am I doing wrong? Thanks

Vale Over a year ago

@AMANAGARWAL I've edited the answer fixing something that was probably wrong. If that doesn't work, you should show the output of console.log($scope.objects.elements);

|

ngLover · Accepted Answer · 2015-07-22 13:25:29Z

0

try this ..

due to your async call you need to perform task inside success

$http.get(request).success(function(data) {
        hotels.objects = data;
        console.log(hotels.objects.elements);

         for (each in hotels.objects.elements) {
              hotels.spots.push(each.tags.name);
          };

        console.log(this.spots);
    });

edited Jul 22, 2015 at 13:25

answered Jul 22, 2015 at 12:52

ngLover

4,6183 gold badges23 silver badges42 bronze badges

4 Comments

ngLover Over a year ago

due to your async call you need to perform task inside success

Grundy Over a year ago

so add explanation in your answer :-)

ngLover Over a year ago

happy now ? i was in hurry that time :D

Grundy Over a year ago

without any explanation your code just duplicate part of other answer, so better remove it than add, and if i not mistaken, first version of your answer was wrong.

Collectives™ on Stack Overflow

Can't access variable inside angular.js controller

3 Answers 3

4 Comments

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related