push ajax response to array in angularJs

Question

I have a function with the array objects.

$http({
       method: 'GET',
       url: 'select.php'
     }).then(function success(response) {
          alert(response);
          //$scope.posts=response.data; 
     }, function error(response) {
          // called asynchronously if an error occurs
          // or server returns response with an error status.
     }
);
function store() {    
    this.products = [        
       new product("APL", "Apple", "Eat one every…", 12, 90, 0, 2, 0, 1, 2),
       new product("AVC", "Avocado", "Guacamole…", 16, 90, 0, 1, 1, 1, 2),
       new product("BAN", "Banana", "These are…", 4, 120, 0, 2, 1, 2, 2)           
    ];

}

In the above code we are passing some static data, but instead i am trying to a push some dynamic data which comes from another file as a ajax response.

so how can i make it dynamic. i have tried like this

function store() {
this.products = [    
    //new product("APL", "Apple", "Eat one every…", 12, 90, 0, 2, 0, 1, 2),
    //new product("AVC", "Avocado", "Guacamole…", 16, 90, 0, 1, 1, 1, 2),
    //new product("BAN", "Banana", "These are…", 4, 120, 0, 2, 1, 2, 2)
    $scope.product.push(response.data);
];
}

but its not working. any idea how can i make it?

You have to put $scope.product.push(response.data); in the success of ajax request — Vivz
– Vivz, Commented Jul 25, 2017 at 7:20
$scope.products, not $scope.product, in case you hadn't noticed the typo — rrd
– rrd, Commented Jul 25, 2017 at 7:21
new product(), this one should be repeated depend on total row of data right? — noushad mohammed
– noushad mohammed, Commented Jul 25, 2017 at 7:24

Indhu · Accepted Answer · 2017-07-25 07:32:08Z

1

Refer the below code:

$scope.products = [];
    $http({
                  method: 'GET',
                  url: 'select.php'
                }).then(function success(response) {
                    $scope.store(response.data);
                  }, function error(response) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                  });

$scope.store = function(data){
  $scope.products.push(data); 
}

edited Jul 25, 2017 at 7:32

answered Jul 25, 2017 at 7:25

Indhu

3991 gold badge6 silver badges19 bronze badges

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

6 Comments

noushad mohammed Over a year ago

ok then what should i write here in this.products = [ new product() ]}

noushad mohammed Over a year ago

function store() { this.products = [ //new product("APL", "Apple", "Eat one every…", 12, 90, 0, 2, 0, 1, 2), $scope.products.push(response.data); }

Indhu Over a year ago

I have edited my code, have look at it. It will automatically push your new data object to the array.

noushad mohammed Over a year ago

this is the error i am getting in the console $scope is not defined and store is not defined.

Indhu Over a year ago

Can u post with the controller injection. or you update in some js fiddle.

|

georgeawg · Accepted Answer · 2017-07-25 16:10:16Z

Because you want to populate the store with items asynchronously, you need to re-factor the store controller to work with promises:

function storeController($scope, $routeParams, DataService) {

  // get store from service
  ̶$̶s̶c̶o̶p̶e̶.̶s̶t̶o̶r̶e̶ ̶=̶ ̶D̶a̶t̶a̶S̶e̶r̶v̶i̶c̶e̶.̶s̶t̶o̶r̶e̶;̶

  var promise = DataService.getStore();

  promise.then(function(store) {
      $scope.store = store;
      return store;
  }).then(function(store) {
      // use routing to pick the selected product
      var sku = $routeParams.productSku
      if ( sku != null) {
        $scope.product = DataService.getProduct(store, sku);
      };
  });
}

Then DataService needs to return a promise:

storeApp.service("DataService", function($http) {
  ̶v̶a̶r̶ ̶m̶y̶S̶t̶o̶r̶e̶ ̶=̶ ̶n̶e̶w̶ ̶s̶t̶o̶r̶e̶(̶)̶;̶

  ̶t̶h̶i̶s̶.̶s̶t̶o̶r̶e̶ ̶=̶ ̶m̶y̶S̶t̶o̶r̶e̶;̶
  this.getStore = _getStore;
  this.getProduct = _getProduct;

  var dataPromise;
  function _getStore() { 
    if (! dataPromise) {
        dataPromise = getData();
    };   
    return dataPromise.then(function(data) {
       return data.map(item => new product(item));
    });
  }

  function getData() {
    var url = 'select.php';
    return $http.get(url)
      .then(function success(response) {
        return response.data; 
    }).catch(function error(response) {
        // called asynchronously if an error occurs
        console.log("ERROR: ",response.status);
        throw response;
    });
  }

  function _getProduct(products, sku) {
      for (var i = 0; i < products.length; i++) {
        if (products[i].sku == sku)
          return products[i];
      }
      return null;
  }
});

Avoid putting constructor functions such as store on global scope. In addition to cluttering global scope, they can't take advantage of AngularJS services such as $http. Instead encapsulate those functions in AngularJS services which can then inject other services.

Collectives™ on Stack Overflow

push ajax response to array in angularJs

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related