'object is not a function' when joining two json arrays with angular

Question

I'm getting an error when I run the 'getPriceSummary' function below more than once. I call the function from the UI and then add one part of JSON to another and send it off to an API...

   (function() {
     var quoteBuild = angular.module('quoteApp');
     quoteBuild.controller('builderController', function($scope) {

       $scope.priceSummaryRequest = {
         "Groups": [{
             "Products": []
           },
           // other stuff
         ]
       };

       // this is dynamically created in the UI - this is just an examply of whats created
       $scope.selectedProducts.Products = [{
         "ProductCode": "Code1",
       }, {
         "ProductCode": "Code1",
       }, ]

       $scope.getPriceSummary = function() {

         $scope.priceSummaryRequest.Groups[0].Products.push.apply($scope.priceSummaryRequest.Groups[0].Products, $scope.selectedProducts.Products);
         // get prices back from the api
         productsServices.getSolutionPrice($scope.priceSummaryRequest)
           .then(function(res) {})
           .finally(function() {});
       }
     });
   }());

As mentioned, the first time $scope.getPriceSummary runs it works, but if I run it again I get this error

TypeError: object is not a function
at hb.functionCall (https://ajax.googleapis....)    
at Cc.(anonymous function).compile.d.on.f (https://ajax.googleapis....)    
at l.$get.l.$eval (https://ajax.googleapis....)    
at l.$get.l.$apply (https://ajax.googleapis....)    
at HTMLTableRowElement.<anonymous> (https://ajax.googleapis...)    
at HTMLTableRowElement.n.event.dispatch (https://ajax.googleapis...)    
at HTMLTableRowElement.n.event.add.r.handle (https://ajax.googleapis...)
(anonymous function)angular.js:8548 $getangular.js:14489     $get.l.$applyangular.js:21427 (anonymous function)jquery.min.js:3 n.event.dispatchjquery.min.js:3 n.event.add.r.handle

which I think is related to where I am doing the push.apply. Any ideas what I am doing wrong?

EDIT I'm not sure if this relevant, but I call the getPriceSummary function from a table row like this

<tr ng-click="getPriceSummary(I pass prices in here - just removed it)"  ng-repeat="prices in productVariant.Prices">

Please write what you want to do where you call the push function. — Bazinga
– Bazinga, Commented Mar 5, 2015 at 12:23
I want to push the products array of 'selectedproducts' into 'pricesummaryrequest' — Jose the hose
– Jose the hose, Commented Mar 5, 2015 at 13:12
Like this (check the script file) plnkr.co/edit/R6w87Edwq5H37Ruh8Anu?p=catalogue — Jose the hose
– Jose the hose, Commented Mar 5, 2015 at 13:25

Bazinga · Accepted Answer · 2015-03-05 13:30:08Z

1

You can do this like this:

  var priceSummaryRequest = {
    "Groups": [{
        "Products": []
      },
      // other stuff
    ]
  };

  var selectedProducts = {};
  selectedProducts.Products = [{
    "ProductCode": "Code1",
  }, {
    "ProductCode": "Code1",
  }, ];

  selectedProducts.Products.forEach(function(product) {
    priceSummaryRequest.Groups[0].Products.push(product);
  });

  console.dir(priceSummaryRequest.Groups[0].Products);

http://plnkr.co/edit/IuneSeIIGQjby2V8rlZK?p=catalogue

answered Mar 5, 2015 at 13:30

Bazinga

11.3k7 gold badges42 silver badges66 bronze badges

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

Comments

score 1 · Accepted Answer · 2015-03-05 13:25:25Z

1

According to MDN push.apply needs to be done from the prototype. Try:

Array.prototype.push.apply(
  $scope.priceSummaryRequest.Groups[0].Products,
  $scope.selectedProducts.Products);

Alternatively you can simply:

$scope.selectedProducts.Products.forEach(function(item){
      $scope.priceSummaryRequest.Groups[0].Products.push(item);
});

edited Mar 5, 2015 at 13:25

answered Mar 5, 2015 at 12:19

user1334319

3 Comments

Jose the hose Over a year ago

Thank you. I tried this but it is still the same error... Array.prototype.push.apply($scope.priceSummaryRequest.Groups[0].Products, $scope.selectedProducts.Products);

user1334319 Over a year ago

push.apply actually merges the two arrays, so my first guess is that the two arrays must contain objects that are comparable (same JSON structure?). If you don't want to merge but simply add (as per your comment), try firstArray.push(secondArray)

Jose the hose Over a year ago

Yes i had tried that before - but I ended up with "Products": [[ //products in here ]] - note the double [[ ]]. so thats why I used push.apply

Collectives™ on Stack Overflow

'object is not a function' when joining two json arrays with angular

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related