Cannot read property 'push' of undefined Angular JS

Question

I want to change div automatic with $scope.push

but it still have problem with:

Cannot read property 'push' of undefined

My JSON and JAVASCRIPT codes:

JSON

{"records":[{"total":"156000"}]}

JAVASCRIPT

 $scope.plusCart = function() {
        $http({
            method  : 'POST',
            url     : 'http://localhost/so-ku/www/server/menu/plus_cart',
            headers : { 'Content-Type' : 'application/json' },
            data    : JSON.stringify({ rowid: $scope.currentItem.rowid, qty : $scope.currentItem.qty })
        }).success(function(data) {
            total_cart()
        });

    }
    function total_cart() {
    $http.get('http://localhost/so-ku/www/server/menu/total_cart').
        then(function(response){
            $scope.x = [];
            $scope.x = response.data.records;
            $scope.xtotal.push($scope.x.total);
    });
}

html

<div ng-controller="CartCtrl">
    <div ng-repeat="tot in xtotal" style="padding-top: 10px;">
        Rp {{tot.total}}
    </div>
</div>

Note : I want to after submit plusCart , div automatically change the value with $scope.push

Thanks.

push works on array and $ scope is not a array. try on the veriable you defining and assigning value on it — Aniruddha Das
– Aniruddha Das, Commented Dec 6, 2016 at 0:58

Rohìt Jíndal · Accepted Answer · 2016-12-06 08:02:21Z

1

As per your JSON :

{"records":[{"total":"156000"}]}

response.data.records already having an array [{"total":"156000"}].So, there is no need to assign it again in an array.

code correction :

Use only $scope.x = response.data.records instead of $scope.x = []
Declare an array with name $scope.xtotal.

Working Demo :

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
  var jsonObj = {
		"records":[{"total":"156000"}]
  };
              
  $scope.xtotal = [];              
  $scope.x = jsonObj.records;
  $scope.xtotal.push($scope.x[0].total);
  console.log($scope.xtotal);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="item in xtotal">
   {{item}}
  </div>
</div>

answered Dec 6, 2016 at 8:02

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

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

6 Comments

Azizal Yunan P Over a year ago

$scope.xtotal is not automatic refresh after submit bro

Rohìt Jíndal Over a year ago

@AzizalYunanP I did not understand what you want to say

Azizal Yunan P Over a year ago

i want to when i submit form then div refresh automatically change the value

Rohìt Jíndal Over a year ago

@AzizalYunanP It will work with submit also. I just used mock json only for resolving the issue.

Azizal Yunan P Over a year ago

yeah done bro , i want ask a question once more , how push data with another page example : header content button is in content area , but i want push data from header ??

|

Aniruddha Das · Accepted Answer · 2016-12-06 01:37:33Z

1

as $scope.xtotal is not defined, a array push is showing error there

try below

function total_cart() {
    $http.get('http://localhost/so-ku/www/server/menu/total_cart').
        then(function(response){
            $scope.xtotal = [];   ///define the veriable
            $scope.x = [];
            $scope.x = response.data.records;
            $scope.xtotal.push($scope.x.total);
    });
    }

answered Dec 6, 2016 at 1:37

Aniruddha Das

21.8k27 gold badges104 silver badges135 bronze badges

Comments

Akbar Kautsar · Accepted Answer · 2016-12-06 03:42:59Z

0

$scope.x Is an array. because {"records":[{"total":"156000"}]}

If you want to assign all values from resonse.data.records you can simply do:

$scope.xtotal = response.data.records;

If you want to do manually, and yes you need to declare variable as an array:

$scope.xtotal = [];
for (var i = 0; i < $scope.x.length; i++) {
    var obj = $scope.x[i];
    // do your modification for an obj
    // and push to your $scope.xtotal
    $scope.xtotal.push(obj);
}

edited Dec 6, 2016 at 3:42

answered Dec 6, 2016 at 3:37

Akbar Kautsar

4185 silver badges14 bronze badges

2 Comments

Azizal Yunan P Over a year ago

yes i know ,but when i submit post data , <div ng-repeat="tot in xtotal" > is not automatic refresh bro

Akbar Kautsar Over a year ago

I see, so after submitting the form, you are expecting total is updated in frontend? May be there are an error when submiting the form data. maybe you can add .error in your post method $http({}).success(function(){}).error(function(){}); And try to log something in error section Also just my suggestion please use .then rather than .success Please refer here and here

K Scandrett · Accepted Answer · 2016-12-06 04:19:13Z

0

Because $scope.x (which is set to response.data.records) is already the array you want

$scope.xtotal.push($scope.x.total);

should just be

$scope.xtotal = $scope.x;

See plunker: http://plnkr.co/edit/fo1kffVaIUKe3DrRDODN?p=preview

answered Dec 6, 2016 at 4:19

K Scandrett

16.6k4 gold badges43 silver badges69 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'push' of undefined Angular JS

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Linked

Related