Can't apply JSON data to array - AngularJS

Question

I am not able to add data to an array. Looked at all solutions here at the site, tried push.apply, concat... nothing works.

Here's my code:

Controller:

myApp.controller('ordersController', function ($scope, customerFactory){
        $scope.products = [];
        customerFactory.getCustomers(function (data){
            $scope.customers = data;
        })
        $scope.addProduct = function(){
            for (var i = 0; i < $scope.customers.length; i++){
                if ($scope.newProduct.customer == $scope.customers[i].name){
                    $scope.customers[i].push({product:$scope.newProduct.name, quantity:$scope.newProduct.quantity});
                    $scope.newProduct = '';
                }
            }
        }
    });

Providing factory as well:

myApp.factory('customerFactory', function (){
        // a factory is nothing more than a function that returns an object literal!
        var customers = [
            {name:'John Lennon', created_date: 'April 3rd 2014'},
            {name:'Paul McCartney', created_date: 'April 3rd 2014'},
            {name:'George Harrisson', created_date: 'April 1st 2014'},
            {name:'Ringo Starr', created_date: 'March 15th 2014'}];
        var factory = {};
        // add a getstudents method to the object we defined
        factory.getCustomers = function (callback){
            // pass the students to a callback to be used by whoever calls the method
            callback(customers);
        }
        // most important step: return the object so it can be used by the rest of our angular code
        return factory;
    });

Error I get:

"Error: $scope.customers[i].push is not a function $scope.addProduct@file:///C:/Users/Salamat/Documents/MEAN/AngularJS/static/test.html#/orders:53:1
$parseFunctionCall@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js:12404:15
ngEventHandler/</callback@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js:21566:17
$RootScopeProvider/this.$get</Scope.prototype.$eval@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js:14466:16
$RootScopeProvider/this.$get</Scope.prototype.$apply@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js:14565:18
ngEventHandler/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js:21571:17
createEventHandler/eventHandler@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js:3032:9
"

What error you're getting in browser console? Can you share it? Ah I can see error from console. — TheKingPinMirza
– TheKingPinMirza, Commented May 26, 2015 at 5:42
Please declare $scope.customers of type array. Push only works for type of arrays. w3schools.com/jsref/jsref_push.asp — TheKingPinMirza
– TheKingPinMirza, Commented May 26, 2015 at 5:49

Anik Islam Abhi · Accepted Answer · 2015-05-26 05:56:25Z

you can't use push for everything. Push only work for array

Like this

var customers = [
            {name:'John Lennon', created_date: 'April 3rd 2014'},
            {name:'Paul McCartney', created_date: 'April 3rd 2014'},
            {name:'George Harrisson', created_date: 'April 1st 2014'},
            {name:'Ringo Starr', created_date: 'March 15th 2014'}];

customers.push({name:'dummy',created_date: 'April 3rd 2014'});

If you wanna to add another object inside customer property like product you have to declare that as an array

var customer=[{name:'John Lennon', created_date: 'April 3rd 2014',product:[]}];
customer[0].product.push({});

or try like this

 var customers = [
                {name:'John Lennon', created_date: 'April 3rd 2014'},
                {name:'Paul McCartney', created_date: 'April 3rd 2014'},
                {name:'George Harrisson', created_date: 'April 1st 2014'},
                {name:'Ringo Starr', created_date: 'March 15th 2014'}];
customers[0].product=[];
customers[0].product.push({});

manasi sakhare · Accepted Answer · 2015-05-26 05:47:10Z

It all seems to be the effect of the "Callback". You can return the customers from factory function getCustomers. As below:

myApp.factory('customerFactory', function (){
        // a factory is nothing more than a function that returns an object literal!
        var customers = [
            {name:'John Lennon', created_date: 'April 3rd 2014'},
            {name:'Paul McCartney', created_date: 'April 3rd 2014'},
            {name:'George Harrisson', created_date: 'April 1st 2014'},
            {name:'Ringo Starr', created_date: 'March 15th 2014'}];
        var factory = {};
        // new getCustomers function which does not accept a callback as param.
        factory.getCustomers = function (){
            return customers;
        }
        // most important step: return the object so it can be used by the rest of our angular code
        return factory;
    });

And in the controller store it as

$scope.customers = customerFactory.getCustomers();

lyjackal · Accepted Answer · 2015-05-26 05:52:40Z

I am assuming you want an array of products per customer, so you need a products property to add the newProduct to.

$scope.addProduct = function() {
  for (var i = 0; i < $scope.customers.length; i++) {
    if ($scope.newProduct.customer == $scope.customers[i].name) {
      var cust = $scope.customers[i];
      if (typeof cust.products === 'undefined') {
        // Add the products array if it isn't already there  
        cust.products = [];
      }
      // Then add the new product
      cust.products.push({
        product: $scope.newProduct.name,
        quantity: $scope.newProduct.quantity
      });
      $scope.newProduct = '';
    }
  }
}

Collectives™ on Stack Overflow

Can't apply JSON data to array - AngularJS

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related