Angular doesn't update my object after http request

Question

this is my angular code:

samirsoftApp.controller("OrderCtrl",function($scope,$http){
$scope.currentStep=1;
$scope.defaultQuantity=1;
$scope.item={};
$scope.getItem = function(){
$http.get('/test/getItemDetails/')
.success(function(data, status, headers, config) {
$scope.$apply(function(){
$scope.item = data;
});
console.log($scope.item);
})
.error(function(data, status, headers, config) {
console.log(data)
});
};
});

when it request and get answer, it does not update my item object, so I used $apply and it did not work and throw an error: Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.13/$rootScope/inprog?p0=%24digest S/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js:6:417 .....

I also tried

$timeout(function() {
$scope.item = data;
}, 0);

instead of $apply` but it prints a null object in consol

it's like this:

samirsoftApp.controller("OrderCtrl",function($scope,$http,$timeout){
$scope.currentStep=1;
$scope.defaultQuantity=1;
$scope.item={};
$scope.getItem = function(){
$http.get('/test/getItemDetails/')
.success(function(data, status, headers, config) {
$timeout(function() {
$scope.item = data;
}, 0);
console.log($scope.item);
})
.error(function(data, status, headers, config) {
console.log(data)
});
};
});

What should I do for my object to be updated after a http request. thanks

Are you sure that your Ajax request actually returns data? If you have console.log() inside the request, does that show anything? — Peter Ashwell
– Peter Ashwell, Commented Feb 13, 2015 at 2:19
yes, I'm pretty sure about ajax request, it return a json, and fully tested — Masoud Motallebipour
– Masoud Motallebipour, Commented Feb 13, 2015 at 2:20
It looks like your endpoint doesn't actually return a value, have a look at your server code — Peter Ashwell
– Peter Ashwell, Commented Feb 13, 2015 at 2:20

Michael Coleman · Accepted Answer · 2015-02-13 02:47:08Z

2

You can assign the data returned by $http.get() request like this

  $http.get('/test/getItemDetails/')
    .success(function(data, status, headers, config) {
      $scope.item = data;
      console.log($scope.item);
    })
    .error(function(data, status, headers, config) {
      console.log(data);
    });
  };

No need for $apply as angular automatically updates $scope

I suspect the problem is elsewhere with your code

Possibly:

You defined function#getItem which contained the $http request but where did you call it?
Make sure the call to URL /test/getItemDetails/ is
1. returning data by manually browsing or by using a utility like POSTMAN.
2. being called with the proper URL - try checking in developer tools > network for 404 Errors

I have updated your code - demo here - http://jsbin.com/notudebiso/1/edit?html,js,output

(using a $http call to github api)

edited Feb 13, 2015 at 2:47

answered Feb 13, 2015 at 2:32

Michael Coleman

3,4183 gold badges21 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Angular doesn't update my object after http request

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related