Angular JS is throwing an error because it cannot recognize the property 'push' of undefined

Question

Angular JS is throwing an error because it cannot recognize the property 'push' of undefined

Would like to automatically update the div using $scope.push

encountering an issue:

Error: Cannot read property 'push' of undefined

Here are my JSON and JavaScript snippets:

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 : Seeking to have the div content automatically updated after submitting plusCart with $scope.push

Many thanks.

javascript angularjs json

Answer 1

Answer №1

Based on the JSON data provided :

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

The array response.data.records already contains the object [{"total":"156000"}]. Therefore, there is no necessity to reassign it within an array.

Corrected code :

Simply use $scope.x = response.data.records instead of creating a new empty array with $scope.x = []
Create a new array called $scope.xtotal.

Demonstration of Corrected Code :

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>

Answer 2

Based on the JSON data provided :

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

The array response.data.records already contains the object [{"total":"156000"}]. Therefore, there is no necessity to reassign it within an array.

Corrected code :

Simply use $scope.x = response.data.records instead of creating a new empty array with $scope.x = []
Create a new array called $scope.xtotal.

Demonstration of Corrected Code :

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>

Answer 3

Answer №2

Since $scope.xtotal is not defined, an error is occurring when trying to push to the array.

See the adjusted code below:

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

Answer 4

Since $scope.xtotal is not defined, an error is occurring when trying to push to the array.

See the adjusted code below:

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

Answer 5

Answer №3

The array $scope.x contains the data {"records":[{"total":"156000"}]}

To assign all values from response.data.records to $scope.xtotal, you can use the following code:

$scope.xtotal = response.data.records;

If you prefer to do it manually and declare a variable as an array, follow these steps:

$scope.xtotal = [];
for (var i = 0; i < $scope.x.length; i++) {
    var obj = $scope.x[i];
    // make modifications to obj here
    // then push it to $scope.xtotal
    $scope.xtotal.push(obj);
}

Answer 6

The array $scope.x contains the data {"records":[{"total":"156000"}]}

To assign all values from response.data.records to $scope.xtotal, you can use the following code:

$scope.xtotal = response.data.records;

If you prefer to do it manually and declare a variable as an array, follow these steps:

$scope.xtotal = [];
for (var i = 0; i < $scope.x.length; i++) {
    var obj = $scope.x[i];
    // make modifications to obj here
    // then push it to $scope.xtotal
    $scope.xtotal.push(obj);
}

Answer 7

Answer №4

Due to the fact that $scope.x (assigned as response.data.records) is already the suitable array

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

it would be more appropriate to simply do

$scope.xtotal = $scope.x;

For further reference, view plunker: http://plnkr.co/edit/fo1kffVaIUKe3DrRDODN?p=preview

Answer 8

Due to the fact that $scope.x (assigned as response.data.records) is already the suitable array

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

it would be more appropriate to simply do

$scope.xtotal = $scope.x;

For further reference, view plunker: http://plnkr.co/edit/fo1kffVaIUKe3DrRDODN?p=preview

Angular JS is throwing an error because it cannot recognize the property 'push' of undefined

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible to automatically submit a form at regular intervals without reloading the page and simultaneously insert the submitted data into

Navigating through the process of combining non-fixed key multilines of JSON into a single abstracted JSON structure

Ways to transmit information from a modal to a function

How to Utilize Output() and EventEmitter() for Value Transmission in Angular Application

Could you provide some advice for creating a Single Page website?

Selecting multiple items from a grid using the Ionic framework

Tips for enlarging the box width using animation

Utilize a solo input field to upload either a video or image, and showcase a preview of the uploaded content in a

PHP code saves empty value to JSON file

The React-Chartjs chart is displaying without any color rendering

What went awry with my Angular form implementation?

Is it possible to extract an attribute value from a parent element using ReactJS?

Insert a new element at the current scroll position without disrupting the existing scroll or view

Just ran $npm install and encountered an error message: "Module '../lib/utils/unsupported.js' not found."

What is the best way to showcase a formatted JSON string on a webpage?

Is Jquery getting imported correctly, but AJAX is failing to work?

What causes differences in the resulting width between buttons and inputs as opposed to divs and anchor tags?

Clearing values using an AngularJS clear button

Template is not populating with data (Angular)

Obtaining JSON data through AJAX requests from different domains may result in receiving a JSON string format