angular.js: 13920 TypeError: Невозможно прочитать свойство «push» of null

Question

Эта программа предназначена для отправки данных в JSON с завода, который будет использоваться позже, в localhost, но вместо этого я получаю ошибку. Когда вы выбираете заказ, заказ отправляется на другие заказы. Когда я нажимаю кнопку выбора, возникает ошибка в консоли.

Главная страница HTML

<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> 

и контроллер предназначен для отправленного список с завода в локальном хранилище ..

'использовать строгий';

/** 
* @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); 
     };*/ 

    }; 

    }); 

Я был бы признателен за ваш ответ

Answer 1

Кажется, что возвращается JSON.parse($window.localStorage.getItem("orderedfoods")) не является массивом. может быть, нет ничего в localstorage? Когда вы обращаетесь к неэксентируемому элементу в localstorage, он возвращает null. Вы можете попробовать исправить это следующим образом:

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

Answer 2

orderedfood Ваш объект массива является пустым. Вы можете раскомментировать журнал консоли и подтвердить это. Чтобы избежать этой ошибки вы можете проверить на нуль и присвоить пустой массив в orderedfood, как следующее:

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