angular.js：13920 TypeError：无法读取null的属性'push'

Question

This program is meant to send data in JSON from factory which will be used later, to localhost but instead i get the error. When one selects an order the order is sent to another orders. When i click select button is when the error occurs in the console.

Main html page

<div class="jumbotron">
  <h3>'Allo, 'Allo!</h3>
  <p class="lead">
    <img src="images/yeoman.png" alt="I'm Yeoman"><br>
   Welcome to AMPATH Dev Meal System.
  </p>
  <p><a class="btn btn-lg btn-success" ng-href="#/">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p>
</div>

<div class="row marketing">

    <h3>Select The Restaurant of your Choice</h3>
        <!--<form name="menuForm"-->
            <!--Displaying restnames in lists-->
<form>
    <h2>Restaurants</h2>
    <ul> <h3>
        <li ng-repeat="(key,Cafeteria) in myRestaurant">
            {{Cafeteria.restname}} 
        <div>
        <button class="btn btn-lg btn-success" ng-submit="order" ng-click="orderfood(key,Cafeteria)">Check foods</button> 
        </div>
        </li>
        </h3>
    </ul>
</form>
</div>
<div>
 <table border="1" class="w3-table w3-striped w3-bordered w3-border">
     {{me}}
        <thead>
            <tr>
                <td>Food Name</td>
                <td>Price</td>
                <td>Select your order</td>
            </tr>
        </thead>

        <tbody>
            <tr ng-repeat="food in foods">
                <td>{{food.foodname}}</td>
                <td>{{food.price | currency}}</td>
                <td><button class="w3-btn w3-ripple" value="Show alert" ng-click="storage(food)">&#4598; Select</button></td>
            </tr>
        </tbody>
    </table>
</div>

and the controller meant to sent list from factory to the local storage..

'use strict';

/**
 * @ngdoc function
 * @name mealsApp.controller:AboutCtrl
 * @description
 * # AboutCtrl
 * Controller of the mealsApp
 */
angular.module('mealsApp')
  .controller('MenuCtrl', function ($scope, menu, $window) {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
    // $scope.foods;

    // reading data from localstorage
    var orderedfood = JSON.parse($window.localStorage.getItem("orderedfoods"));
    //console.log(orderedfood);

    // Defining restaurant and ordered food
    $scope.myRestaurant = menu.myRestaurant;
    $scope.orderfood = function(key,Cafeteria){
      // console.log(key);

      // Defining foods in a restaurants 
      $scope.foods = Cafeteria.foods;
      // console.log(Cafeteria.foods);

      // Getting foods to local storage
      $scope.storage = function (food){

        orderedfood.push({
          foodname : food.foodname,
          price : food.price,
          orderedfood : true,
          deliveredfood : false
        });

        // Sending data to localstorage
        $window.localStorage.setItem("orderedfoods", JSON.stringify(orderedfood));
      };
      /*$scope.order = function(){
        //$window.alert("You selected" + foodname);
      };*/

    };

  });

I would appreciate your answer

Answer 1

It seems that what is returned by JSON.parse($window.localStorage.getItem("orderedfoods")) is not an array. maybe there is nothing in localstorage? When you address a nonexistant item in localstorage it returns null . You can try to fix it like this:

var orderedfood = JSON.parse($window.localStorage.getItem("orderedfoods"))||[];

Answer 2

Your orderedfood array object is null. You can uncomment the console log and confirm that. To avoid that error you may want to check for null and assign an empty array to the orderedfood , like following:

 var orderedfood = JSON.parse($window.localStorage.getItem("orderedfoods"));
 console.log(orderedfood);
orderedfood = orderedfood || [];