如何将JS数组与HTML表单以JSON发送？AngularJS订单提交报错排查

这个错误的根源非常明确：你在createOrder函数里直接引用了itemOrderList和totalItemPrices，但在AngularJS控制器中，这些变量是挂载在$scope对象上的作用域专属变量，并非全局或局部变量，所以JavaScript引擎找不到它们，才抛出了引用错误。

核心修复方案 #

修改你的createOrder函数，把直接引用的变量替换为$scope上的属性：

$scope.createOrder = function (order) {
    // 必须通过$scope访问作用域内的itemOrderList
    var myJson = JSON.stringify($scope.itemOrderList);
    // 同理，totalItemPrices也要从$scope上获取
    order.orderPrice = $scope.totalItemPrices;
    order.orderItems = myJson;
    
    dataService.addOrder(order).then(function () {
        $location.path('/');
    });
};

为什么会触发这个错误？ #

在AngularJS控制器中，你通过$scope.itemOrderList = []和$scope.totalItemPrices = 0定义的变量，都是当前控制器作用域的成员，必须通过$scope前缀才能访问。直接写itemOrderList相当于尝试访问一个从未声明过的全局变量，自然会触发ReferenceError。

额外优化建议 #

1. 避免价格计算的类型错误：在addPricesToTotalItemPrices函数中，建议把传入的price转为数字类型，防止字符串拼接导致的总价异常：

$scope.addPricesToTotalItemPrices = function (price) {
    console.log(price);
    // 强制转为数字后再累加
    $scope.totalItemPrices += Number(price);
};

2. 考虑跳过手动JSON序列化：如果后端接口支持直接接收数组类型数据，你可以不用手动调用JSON.stringify，直接把$scope.itemOrderList赋值给order.orderItems即可——AngularJS的HTTP服务会自动完成序列化工作，这样代码更简洁，也减少了手动处理的出错概率。

内容的提问来源于stack exchange，提问作者JeremyGiffARCA