Can't get result data with $http angularjs

Question

I'm trying to use $http, but why it return null result?

angular.module('myApp')
.factory('sender', function($http) {
    var newData = null;
    $http.get('test.html')
        .success(function(data) {
            newData = data;
            console.log(newData)
        })
        .error(function() {
            newData = 'error';
        });
    console.log(newData)
    return newData
})

Console say: http://screencast.com/t/vBGkl2sThBd4. Why my newData first is null and then is defined? How to do it correctly?

Hey, if my answer was what you were after please accept it so it doesn't stay open forever. Cheers! — GFoley83
– GFoley83, Commented Jul 21, 2014 at 22:13

animuson · Accepted Answer · 2014-07-21 21:35:32Z

As YardenST said, $http is asynchronous so you need to make sure that all functions or display logic that are dependent on the data that is returned by your $http.get(), gets handle accordingly. One way to accomplish this is to make use of the "promise" that $http returns:

Plunkr Demo

var myApp = angular.module('myApp', []);

myApp.factory('AvengersService', function ($http) {

    var AvengersService = {
        getCast: function () {
            // $http returns a 'promise'
            return $http.get("avengers.json").then(function (response) {
                return response.data;
            });
        }
    };

    return AvengersService;
});


myApp.controller('AvengersCtrl', function($scope, $http, $log, AvengersService) {
    // Assign service to scope if you'd like to be able call it from your view also
    $scope.avengers = AvengersService;

    // Call the async method and then do stuff with what is returned inside the function
    AvengersService.getCast().then(function (asyncCastData) {
            $scope.avengers.cast = asyncCastData;
    });

    // We can also use $watch to keep an eye out for when $scope.avengers.cast gets populated
    $scope.$watch('avengers.cast', function (cast) {
        // When $scope.avengers.cast has data, then run these functions
        if (angular.isDefined(cast)) {          
            $log.info("$scope.avengers.cast has data");
        }
    });
});

@sk8terboi87ツ Then click that up vote; it's what it's for! :)
This definitely works, but I can't believe this is the most efficient way of creating a data factory in Angular. Either way, the OP should mark this answer as correct.

YardenST · Accepted Answer · 2013-02-03 10:44:32Z

5

This JavaScript code is asynchronous.

console.log(newData)
return newData

Is executed before what inside success

newData = data;
console.log(newData)

So at first time, the newData is null (you set it to be null)

And when the http response is returned (inside the success), the newData gets its new value.

This is very common in Javascript, you should do all your work inside the success.

answered Feb 3, 2013 at 10:44

YardenST

5,2762 gold badges38 silver badges60 bronze badges

Collectives™ on Stack Overflow

Can't get result data with $http angularjs

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related