AngularJS JSON object accessible in view, but not accessible in controller

Question

I have a simple service that gets some openWeather JSON. The service is then injected into the controller. In the controller, I cannot access the objects withing the JSON, however, when binding to the, I can access the object data without problem. I'm new to JS and Angular, what am I doing wrong?

Service

mcmdApp.service('areaWeatherService', ['$resource', function($resource){

    this.weatherAPI = $resource("http://api.openweathermap.org/data/2.5/weather", {get: {method: "JSON"}});
    this.weatherResult = this.weatherAPI.get({q: "London,uk"});

}]);

Controller

mcmdApp.controller('SingleElementController',['$scope', 'areaWeatherService',function($scope, areaWeatherService){

    $scope.weatherResult = areaWeatherService.weatherResult;
    console.log($scope.weatherResult); //<-- Shows Object in Console
    console.log($scope.weatherResult.wind); //<-- PROBLEM: Shows Undefined
    console.log($scope.weatherResult.wind.speed); //<-- PROBLEM: Shows cannot read property 'speed' of Undefined

}]);

View

<div class="single-element-widget text-center">
    <h2>{{weatherResult.wind.speed}} mph</h2><!-- NO PROBLEM, displays correctly -->
    <small>{{weatherResult.wind.deg}} degrees</small><!-- NO PROBLEM, displays correctly -->
</div>

I'm attempting to access the objects and properties from either the Controller or Service.

Results of console.log($scope.weatherResult);

e {$promise: d, $resolved: false}$promise: d$resolved: truebase: "cmc stations"clouds: Objectcod: 200coord: Objectdt: 1441164423id: 2643743main: Objectname: "London"sys: Objectweather: Array[1]wind: Object__proto__: e

Edit: I have added the results of console.log($scope.weatherResult); — I think I can code
– I think I can code, Commented Sep 2, 2015 at 4:17

Vineet · Accepted Answer · 2015-09-02 04:53:13Z

4

You're working with an $http promise. The log statement is firing before the data is returned from the server. Try this:

$scope.weatherResult = areaWeatherService.weatherResult.$promise.then(function(resp){
 console.log(resp);
 console.log(areaWeatherService.weatherResult.wind);
});

.then() will wait for your promise to be resolved, then execute the resulting code

edited Sep 2, 2015 at 4:53

Vineet

4,7153 gold badges25 silver badges42 bronze badges

answered Sep 2, 2015 at 4:19

Dan Keiger

6715 silver badges12 bronze badges

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

3 Comments

I think I can code Over a year ago

This returned an error ".then is not a function". However, after adding $promise before .then() like this $scope.weatherResult = areaWeatherService.weatherResult.$promise.then(function(resp){ console.log(resp); It appears to be working. Is this proper code?

Dan Keiger Over a year ago

Whoops! Yes, this is correct. I will update my answer accordingly for others. Congrats on figuring it out!

I think I can code Over a year ago

If I were to move the $promise.then to the service, so that the data is sent and received in the service, before passing to the controller, how then would I access the resp object from withing the controller? Scenario: suppose I wanted to inject this retrieved data into several controllers.

Collectives™ on Stack Overflow

AngularJS JSON object accessible in view, but not accessible in controller

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related