Question

我有2个模型，都是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。我尝试连接这样的2个JSON数组（在表单中调用提交的函数）：

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

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

Answer 1

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

angular.extend doc

Answer 2

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

 var output = items.concat(input);

编辑：要进一步追踪问题，您可以在代码中添加debugger;语句，以便在运行时中断代码。然后，您可以在运行该段代码时在浏览器中打开开发工具控制台，验证类型是否符合预期。

Answer 3

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

@ragingprodigy让我走上正轨。

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

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

我还必须更改表单元素的绑定以包含控制器（作为ctrl）

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

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

Answer 4

如果您能提供完整的调查代码，将会有所帮助。我的猜测是你在调用sendMessage时遇到问题，因为＆＃39;输入＆＃39;是你的模型的一部分尝试这样称呼它：

 self.sendMessage = function(items ) {
   var output = self.input.concat(items); 
}

或者如果您已定义范围：

self.sendMessage = function(items ) {
       var output = $scope.input.concat(items); 
    }

Answer 5

我通常使用带角度的jquery。如果是这种情况，你可以使用$ .extend（true，{}，obj1，obj2）把你最有价值的对象放在最后（可能由用户编辑），以防你在两者上都有相同的属性，并且只想留下其中一个。

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

5 个答案: