Html 如何为$http数据合并2个JSON数组?
我有两个模型,都是JSON数据。一个是由表单中的用户输入生成的,另一个是由API提供的数据,并由相同表单中的用户输入修改 以下是视图中的表单:Html 如何为$http数据合并2个JSON数组?,html,angularjs,Html,Angularjs,我有两个模型,都是JSON数据。一个是由表单中的用户输入生成的,另一个是由API提供的数据,并由相同表单中的用户输入修改 以下是视图中的表单: <form method="post" name="form" role="form" ng-controller="ContactFormController as ctrl" ng-submit="form.$valid && ctrl.sendMessage(input, ctrl.cartItems)" novalidate
<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>
我需要将两个JSON数组中的所有数据上传到API。我尝试像这样连接2个JSON数组(表单中提交时调用的函数):
但是我得到了一个类型错误。
如果我遗漏了你需要的信息,请原谅我;我是Angular的新手。您可能想看看Angular.extend,我认为它应该可以解决您的问题
您可能想看看angular.extend,我认为它应该可以解决您的问题
类型错误通常意味着类型不是您期望的类型。我猜输入不是数组。尝试将代码更改为:
var output = items.concat(input);
编辑:要进一步跟踪问题,可以添加
调试器代码>语句,以便在运行时打断代码。然后,您可以在运行该段代码时打开浏览器中的开发工具控制台来验证类型是否符合预期。类型错误通常意味着类型不是您预期的类型。我猜输入不是数组。尝试将代码更改为:
var output = items.concat(input);
编辑:要进一步跟踪问题,可以添加调试器代码>语句,以便在运行时打断代码。然后,您可以在运行该段代码时打开浏览器中的dev tools控制台来验证类型是否符合预期。如果您可以提供完整的代码以供调查,则会有所帮助。
我猜您在调用sendMessage时遇到了问题,因为“输入”是模型的一部分,请尝试这样调用它:
self.sendMessage = function(items ) {
var output = self.input.concat(items);
}
或者,如果您已经定义了范围:
self.sendMessage = function(items ) {
var output = $scope.input.concat(items);
}
如果你能为调查提供完整的代码,这会有所帮助。
我猜您在调用sendMessage时遇到了问题,因为“输入”是模型的一部分,请尝试这样调用它:
self.sendMessage = function(items ) {
var output = self.input.concat(items);
}
或者,如果您已经定义了范围:
self.sendMessage = function(items ) {
var output = $scope.input.concat(items);
}
我通常将jquery与angular一起使用。
如果是这种情况,可以使用$.extend(true、{}、obj1、obj2)
将您最有价值的对象放在末尾(可能是用户编辑的对象),以防两个对象的属性相同,并且只想使用其中一个对象。我通常将jquery与angular一起使用。
如果是这种情况,可以使用$.extend(true、{}、obj1、obj2)
将你最有价值的物品放在最后(可能是用户编辑的),以防你在这两个物品上拥有相同的属性,并且只想保留其中一个。对所有在这个问题上帮助过我的人,非常感谢
@拉金神童让我走上了正确的道路
我必须将控制器中方法内的输入更改为:
var output = [input].concat(items);
我还必须更改表单元素的绑定以包含控制器(如ctrl)
再次感谢所有帮助过我的人!我希望这个答案对其他人有所帮助。对所有在这个问题上帮助过我的人,非常感谢
@拉金神童让我走上了正确的道路
我必须将控制器中方法内的输入更改为:
var output = [input].concat(items);
我还必须更改表单元素的绑定以包含控制器(如ctrl)
再次感谢所有帮助过我的人!我希望这个答案对其他人有所帮助。你得到了什么错误?@mohamedrias-TypeError:undefined不是self.sendMessage的函数,但是从表单中,表单中的输入模型不是数组。它是一个对象,带有键email
,name
,school
。您可能想做的是:var输出=[input].concat(items)代码>我还没有测试过这个,但我认为它应该可以工作。@RogerCreasy当你使用输入时。concat(items)是你期望的结果吗?你得到了什么错误?@mohamedrias-TypeError:undefined不是self.sendMessage的函数,但是从你的表单来看,表单中的输入模型不是数组。它是一个对象,带有键email
,name
,school
。您可能想做的是:var输出=[input].concat(items)代码>我还没有测试过,但我认为它应该可以工作。@RogerCreasy当您使用输入时。concat(items)的结果是否如您所期望的那样?适合作为注释:)适合作为注释:)谢谢。代码更改将我的错误转移到我的API。所以,我想你有什么发现。我将尝试调试器代码>如果输入“不是您想要的(或者更确切地说,是API)期望,这是有意义的。它仍然会被添加到数组中,但是如果不能反序列化,你的API会呕吐。一定要尝试断点来确认。实际上,添加cartItems位是破坏代码的原因。它只在输入模型中工作得很好。谢谢。代码将我的错误转移到了我的API中。因此,我认为你是在som上我将尝试调试器;
如果输入“不是您(或者更确切地说,API)所期望的,那么这将是有意义的。它仍然会被添加到数组中,但是如果你的API不能反序列化,它会呕吐。一定要尝试断点来确认。实际上,添加cartItems位是破坏代码的原因。它只在输入模型上工作得很好。我尝试了这个,我得到:TypeError:无法读取self.sendMessage上未定义的属性“concat”。我仍在努力解决这个问题。下面是我的代码和我最近尝试实现的建议:我尝试了这个,我得到:TypeError:无法读取self.sendMessage上未定义的属性“concat”。我仍在努力解决这个问题。以下是我的代码和我尝试实现的最新建议: