How do I merge 2 JSON arrays for $http data? - html

Question

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.
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):
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.

Answer 1

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

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

Answer 3

To all who helped me on this issue, a big thank you!
#ragingprodigy put me on the right track.
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)
ng-model="ctrl.input.[each form element on input]"
Thanks again to all who helped! I hope this answer helps someone else.

Answer 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:
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);
}

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