AngularJS: Accessing an object nested within $scope

Question

I have been trying to resolve this issue with no success. I understand that getCurrentPosition() returns a promise and calling $scope.map.center within the .then() function will work. I also understand that $scope runs in the digest cycle and its properties and objects are updated when the promise resolves. I am new to all this and I hope I am making sense.

That said, I would totally love to understand what's going on because console.log($scope.map) works as expected, {{ map.center }} displays as expected, but console.log(map.center) returns an empty object outside of the .then() function.

Thanks in advance for your assistance!

    $scope.map = {
            control: {},
            center: {},
            zoom: 16
        };

    $geolocation.getCurrentPosition({
        timeout: 60000,
        maximumAge: 250,
        enableHighAccuracy: true
    }).then(function(position) {
        $scope.map.center.latitude = position.coords.latitude;
        $scope.map.center.longitude = position.coords.longitude;
    });


    //Output
    
    console.log($scope.map); //returns full object including data within $scope.map.center

    console.log($scope.map.center); //returns an empty object. I am looking to convert this to an array using lodash.

 {{ map.center  }} works fine and returns the coordinates of my current location

**Edit (Uploaded image of console) **

This is what I see in the console. First object is $scope.map Second object is $scope.map.center

jtmingus · Accepted Answer · 2016-06-01 01:33:19Z

0

The then function is called when getCurrentPosition has finished (it's asynchronous) and sent the data back to the client. It's the only place you can reliably access the data retrieved by it. If you are making asynchronous calls you must use the then function to access the data. THEN is what takes place after the call is made. The code that follows the then (outside of the function) executes immediately after getCurrentPosition is called - not when it's completed.

You can call another function outside from the then function and pass the position object to it if you're simply looking for a different place to put this code.

$scope.map = {
        control: {},
        center: {},
        zoom: 16
    };

$geolocation.getCurrentPosition({
    timeout: 60000,
    maximumAge: 250,
    enableHighAccuracy: true
}).then( processMap(position))

function processMap(position) {
    $scope.map.center.latitude = position.coords.latitude;
    $scope.map.center.longitude = position.coords.longitude;
    console.log($scope.map); 
    console.log($scope.map.center); 
};

If you are looking for more information about asynchonous calls, see this explanation:

http://docs.apigee.com/api-baas/asynchronous-vs-synchronous-calls

edited Jun 1, 2016 at 1:33

jtmingus

8345 silver badges10 bronze badges

answered May 31, 2016 at 23:09

Mike Feltman

5,1721 gold badge19 silver badges39 bronze badges

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

3 Comments

nubianrover Over a year ago

Thanks for the detailed answer! Forgive me if I missed it in your explanation, but I am wondering why $scope.map worked in the first place.

Mike Feltman Over a year ago

It either really didn't and you were just getting the object you created at the top of your controller function or it's possible that the call was partially finished.

nubianrover Over a year ago

After doing some more checks, I now think it has something to do with the fact that HTML5 Geolocation returns a special object type called Coordinates. That will satisfy my curiousity for now. But then, I may be wrong.

jtmingus · Accepted Answer · 2016-05-31 23:08:33Z

0

The getCurrentPosition() call is asynchronous. So your calls to log $scope.map and $scope.map.center would just return whatever you initially defined them to be.

The data will only be set in the scope when the ajax call finishes.

answered May 31, 2016 at 23:08

jtmingus

8345 silver badges10 bronze badges

2 Comments

nubianrover Over a year ago

You said they should both return what I initially defined them to be. My call to log $scope.map returned the full object (including the coordinates saved in $scope.map['center']). On the other hand, my call to $scope.map.center returned an empty object. That's what is bothering me. I would be fine if both returned empty objects.

jtmingus Over a year ago

@nubianrover It looks like you also need to call $apply to make sure the changes are reflected in the scope. stackoverflow.com/questions/23185619/…

Collectives™ on Stack Overflow

AngularJS: Accessing an object nested within $scope

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related