如何合并$http数据的2个JSON数组？

Question

我有两个模型，都是JSON数据。一种是由表单中的用户输入生成的，另一种是API提供的数据，并由同一表单中的用户输入进行修改。

以下是视图中的形式：

<form method="post" name="form" role="form" ng-controller="ContactFormController as ctrl" ng-submit="form.$valid && ctrl.sendMessage(input, ctrl.cartItems)" novalidate>
<p ng-show="success">Thanks for getting in touch!</p>
<p ng-show="error">Something went awry with your submission!, please try again.</p>
<div class="formgroup">
    <legend>Express Order Form</legend>
    <div id="formHeader"></div>
<fieldset>
<div class="inputItem">
    <label for="name">Name:</label>
    <input class="form-control" type="text" id="name" name="name" ng-model="input.name" required>
</div>
<div class="inputItem">
    <label for="email">Email:</label>
    <input class="form-control" type="email" id="email" name="email" ng-model="input.email" required>
</div>
<div class="inputItem">
    <label for="School">School:</label>
    <input class="form-control" type="text" id="school" name="school" ng-model="input.school" required>
</div>
<!-- Form Items -->
<div ng-repeat="item in ctrl.cartItems">
    <div class="col-sm-6 cartItemLabel" ng-bind="item.label"></div>
    <div class="col-sm-2 inputItem">
        <input class="form-control" type="text" id="item.id" name="item.id" ng-change="ctrl.updateSub(item)" ng-model="item.qty">
    </div>
    <div class="col-sm-2 inputItem">
        <input class="form-control" type="text" id="item.id" name="item.id" ng-model="item.value">
    </div>
    <div class="col-sm-2 inputItem">
        <input class="form-control" type="text" id="item.id" name="item.id" ng-model="item.subTotal">
    </div>
</div>
<!-- /Form Items -->
<div class="inputItem">
    <label for="messsage">Message:</label>
    <textarea class="form-control" rows="4" id="messsage" name="message" ng-model="input.message" required></textarea>
</div>
<div class="hidden">
    <label for="honeypot">I promise I'm not a bot</label>
    <input type="text" id="honeypot" name="honeypot" ng-model="input.honeyPot">
</div>

下面是上面的表单没有生成的模型：

self.cartItems = [
        {'id': 1, 'label': "Band-Aids (box)", 'value': 1.5, 'qty': 0, 'subTotal': 0},
        {'id': 2, 'label': "Binders – 1/2”", 'value': 6.5, 'qty': 0, 'subTotal': 0},
        {'id': 3, 'label': "Binders – 1”", 'value': 6.5, 'qty': 0, 'subTotal': 0},
        {'id': 4, 'label': "Binders – 1 1/2”", 'value': 7.5, 'qty': 0, 'subTotal': 0},
        {'id': 5, 'label': "Binders – 2”", 'value': 8.5, 'qty': 0, 'subTotal': 0}
    ]

我需要将两个JSON数组中的所有数据上传到API中。我试图像这样连接2JSON数组(在表单中对submit调用的函数)：

self.sendMessage = function( input, items ) {
   var output = input.concat(items); 
   ....[on to my $http call]

但我得到了一个类型错误。如果我遗漏了你需要的信息，请原谅，我是个新手。

Answer 1

感谢所有在这个问题上帮助我的人，非常感谢你们！

@破烂神童让我走上了正轨。

我必须将控制器中的方法中的输入更改为：

var output = [input].concat(items);

我还必须更改表单元素的绑定，以包含控制器(如ctrl)。

ng-model="ctrl.input.[each form element on input]"

再次感谢所有帮助我的人！我希望这个答案对其他人有帮助。

Answer 2

您可能想看看angular.extend，我认为它应该解决您的问题。

angular.extend文档

Answer 3

类型错误通常意味着类型不是您所期望的。我猜输入不是数组。尝试将代码更改为：

 var output = items.concat(input); 

编辑：为了进一步跟踪这个问题，您可以在代码中添加一个debugger;语句，以便在运行时中断代码。然后，您可以通过在浏览器中打开dev tools控制台来验证这些类型是否符合您的期望，同时运行这段代码。