Как отправить массив Javascript как Json в сочетании с формой html?

Question

Я создаю приложение меню ресторана, которое официант может использовать для ввода заказов.

У меня есть массив Js с именем itemOrderList, в котором я сохраняю названия предметов. Я хочу иметь возможность отправлять это список имен элементов в виде массива Json с полем ввода формы имени клиента и ценой элемента для хранения в моей БД. У меня проблемы с этим. Что я должен делать? Инструменты разработчика Google говорят: «ReferenceError: itemOrderList не определен», где я пытаюсь преобразовать массив Js в строку.

AngularJs код

 .controller('orderAddCtrl', ['$scope', '$location', 'dataService', function ($scope, $location, dataService) {

            $scope.itemOrderList = [];
            $scope.totalItemPrices = 0;

            $scope.addOrderToList = function (item) {
                console.log(item.itemName);
                $scope.addPricesToTotalItemPrices(item.itemPrice);
                $scope.itemOrderList.push(item.itemName);
            };

            $scope.addPricesToTotalItemPrices = function (price) {
                console.log(price);
                $scope.totalItemPrices += price ;
            };


            $scope.removeFromOrderToList = function (index) {
                console.log(index);
                $scope.itemOrderList.splice(index, 1);
            };

            $scope.createOrder = function (order) {
                var myJson = JSON.stringify(itemOrderList);
                order.orderPrice = totalItemPrices;
                order.orderItems = myJson;
                dataService.addOrder(order).then(function () {
                    $location.path('/');
                });
            };

Html

<form class="form-horizontal" ng-init="getItems()">
    <div class="row">
        <div class="col-6">
            <div class="form-group">
                <div>
                    <input ng-click="createOrder(order)" class="btn  btn-success" value="Create" />
                    <a href="#/" class="btn  btn-success">Back</a>
                </div>
            </div>
        </div>

        <div class="col-6">
            <div class="form-group">
                <label class="control-label">Customer Name</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" ng-model="order.customerName" />
                </div>
            </div>
        </div>
    </div>

    <div>
        <h1>Total Price: ${{totalItemPrices}}</h1>
    </div>

    <div class="">
        <h2>Food Items</h2>
        <div class="row">
            <button class="btn btn-success col-3" ng-repeat="i in Items" ng-click="addOrderToList(i)">{{i.itemName}}</button>
        </div>
    </div>


    <div class="">
        <h2>Order Items</h2>
        <ul>
            <li ng-repeat="i in itemOrderList track by $index">
                <p>{{i}}/<p>
                    <button ng-click="removeFromOrderToList($index)">Remove</button>
            </li>
        </ul>
    </div>
    </div>
</form>

Answer 1

Готов поспорить, вам нужно указать, что вы используете переменные, объявленные в $ scope, так ...

$scope.createOrder = function (order) {
  var myJson = JSON.stringify($scope.itemOrderList);
  order.orderPrice = $scope.totalItemPrices;
  order.orderItems = myJson;
  dataService.addOrder(order).then(function () {
    $location.path('/');
  });
};