Angular JS : $http.get() data is not being updated to View

Question

Script.js

        var app=angular.module("myapp",["panelModule"]);
        var store=this;
        store.products=[];

        //following code yield proper output
        // app.controller("StoreController",function () {
        //  this.products=data; //data is a array of object defined in same file
        // });

        app.controller("StoreController",['$http',function($http){
            return $http.get('js/data.json').then(onDataReceive);
        }]);

        var onDataReceive=function(response) {
            store.products.push(...response.data);
            console.log(store.products); //this shows [object, object] in browser console

        };

I m basically iterating over the array of object with ng-repeat in my view( index.html) But it is not getting update when i used $http service.However static data is getting displayed properly. I m going thru some online AngularJs tutorial. I m new to AngularJs. Please point me out what i m doing wrong here? Thanks

What is the browser you are using? Try using Array.prototype.push.apply(store.products, response.data) instead of store.products.push(...response.data); — Paraíso
– Paraíso, Commented Feb 28, 2017 at 13:40
Why are you using your store property and onDataReceive function outside of the controllers? — devqon
– devqon, Commented Feb 28, 2017 at 13:43
That code is really weird, why is store outside Angular? I really suggest you going through the Angular tutorial so that you acquire the basics. — sp00m
– sp00m, Commented Feb 28, 2017 at 13:43

Rohìt Jíndal · Accepted Answer · 2017-03-01 10:16:07Z

2

Try this :

var app = angular.module("myapp", ["panelModule"]);
app.controller("StoreController", ['$http', function($http) {
var store = this;
store.products = [];
getData = function() {
    return $http.get('js/data.json').then(function(response) {
        $scope.data = response.data;
    });
}


// do the ajax call
getData().then(function(data) {
    // stuff is now in our scope, I can alert it
    store.products = $scope.data;
    console.log(store.products);
});

answered Mar 1, 2017 at 10:16

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

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

Comments

Rakesh Chand · Accepted Answer · 2017-02-28 16:00:11Z

1

var app = angular.module("myapp", ["panelModule"]);
app.controller("StoreController", ['$http', function($http) {
  var store = this;
  store.products = [];
  gettingAPIData();
  function gettingAPIData() {
    $http.get('js/data.json').then(function(response) {
        store.products. = response.data;
        onDataReceive();
    });
  }
  function onDataReceive() {
    console.log(store.products);
  };
}]);

This is the way to do it, you first create a method and do the http stuff in it. Call another method in the success response and print it out.

edited Feb 28, 2017 at 16:00

answered Feb 28, 2017 at 13:43

Rakesh Chand

3,1131 gold badge25 silver badges43 bronze badges

2 Comments

smasher Over a year ago

i got one doubt ... the function passed as success promise is anonymous right .. also the onDataReceive should be response. Please correct me if i m wrong

Rakesh Chand Over a year ago

yes that's a typo $http.get('js/data.json').then(function(response) { here i'm not calling onDateReceive function, it's just reponse. edited & corrected.. Please try

Collectives™ on Stack Overflow

Angular JS : $http.get() data is not being updated to View

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related