AngularJS Http get empty first time

Question

I have this code

PedidosService.getProductbyID($scope.listProductos.ProductID).then(function (d) {
            $scope.oneProduct = d.data.producto;                
        });

PedidosService is the name of my factory, getProductbyId is my http get request and $scope.oneProduct is the variable where i want store the result of this request.

factory.getProductbyID = function (id) {
    return $http.get('/Pedidos/GetProduct/' + id);
}

factory is my Factory and getProductbyID is my function to call http request

I call this code in a button. The first time that I click in the button, it returns a empty response '[]' but the next times that I click the button, it works fine!!!.

Thanks for you help

Answer 1

As far as I know the $http.get returns a promise because that call is asynchronous. With that in mind a typical call to $http.get should be something like this:

$http.get('/someUrl', config).then(successCallback, errorCallback);

In your context I would have done it this way, so the factory returns a promise and in your controllers you will handle the success and error callback appropriately:

factory.getProductbyID = function (id) {
 var deffered = $q.defer();       
    $http.get('/Pedidos/GetProduct/'+ id)
        .then(function (result) {               
            deffered.resolve(result);
        }, function (data) {
            deffered.reject(data);
        });

    return deffered.promise;
 }