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

I have 2 models, both JSON data. One is generated by user input in a form, the other is data provided by an API and is modified by user input in the same form.

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

here is the form in the view:

这是视图中的表单：

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

Here is the model that is NOT generate by the form above:

以下是上表中未生成的模型：

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

I need to upload all data from both JSON arrays to an API. I tried to concatenate the 2 JSON arrays like this (the function that is called on submit in the form):

我需要将来自两个JSON数组的所有数据上传到API。我试图连接这样的2个JSON数组（在表单中调用提交的函数）：

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

but I get a type error. Forgive me if I left out info you need; I am a newbie to Angular.

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

5 个解决方案

#1

You might like to take a look at angular.extend, I think it should solve your problem.

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

angular.extend doc

#2

A type error usually means that a type is not what you expected. I would guess that input is not an array. Try changing your code to this:

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

 var output = items.concat(input);

Edit: To further track down the issue, you can add a debugger; statement in your code to break in the code at runtime. Then you can verify the types are what you expect by opening the dev tools console in your browser while running that piece of code.

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

#3

To all who helped me on this issue, a big thank you!

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

@ragingprodigy put me on the right track.

@ragingprodigy让我走上正轨。

I had to change the input within the method in my controller to:

我不得不将控制器中方法中的输入更改为：

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

I also had to change the form elements' binding to include the controller (as ctrl)

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

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

Thanks again to all who helped! I hope this answer helps someone else.

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

#4

It would help if you could provide full code for investigation. My guess is that you have an issue calling sendMessage, since 'input' is part of your model try calling it like this:

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

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

or if you have defined scope:

或者如果您已定义范围：

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

#5

I usually use jquery with angular. If this is your case, you could use $.extend (true, {}, obj1, obj2) put your most valuable object at the end (probably the edited by the user), just in case you have the same property on both and wanna stay with only one of them.

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

#1