Merge two JSON objects containing arrays using jQuery

Question

I'm trying to merge two JSON objects which contains arrays:

var data1 = '{"resourceType": "test", "entry": [{"foo": 123, "test":"foo"},{"foo": 456, "test":"abc"}]}';
var data2 = '{"resourceType": "test", "entry": [{"foo": 789, "test":"bar"},{"foo": 102, "test":"def"}]}';

var json1 = JSON.parse(data1);
var json2 = JSON.parse(data2);

var obj = $.extend({},json1,json2);
console.log(obj);

but what I'm getting is overwritten by data2 object when .concat will create an array with those two objects rather than wham I'm looking for is to get entry array of objects to be combined.

JSFiddle

Desired results should be like:

{"resourceType": "test", 
 "entry": [
    {"foo": 123, "test":"foo"},
    {"foo": 456, "test":"abc"},
    {"foo": 789, "test":"bar"},
    {"foo": 102, "test":"def"}
  ]
}

Any tips on that?

@TA Yeah, I have tried that: var obj = $.merge( $.merge( [], json1 ), json2 ) — JackTheKnife
– JackTheKnife, Commented Jul 9, 2018 at 15:06
Merge them manually. In this case you only have two objects, either with identical keys and one value that differs, just create a new object and merge the arrays. — user400654
– user400654, Commented Jul 9, 2018 at 15:21

EECOLOR · Accepted Answer · 2018-07-09 15:35:54Z

1

If you look at the documentation of jquery extend you can see that you can pass deep as first argument:

var obj = $.extend(true, {},json1,json2);

With your test data, because the keys in the objects are named the same, the result will just have the second set of objects.

If you want some other result you need to update your question to clarify the desired effect.

Update

If you want the entries to be combined you can do something like this:

var entries = json1.entry.concat(json2.entry);
console.log(entries);

edited Jul 9, 2018 at 15:35

answered Jul 9, 2018 at 15:06

EECOLOR

11.3k3 gold badges44 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user6749601 Over a year ago

I agree. deep will make the difference.

user400654 Over a year ago

@DiabolicWords Except... it won't. It doesn't combine values. It won't combine the two arrays into one, it'll simply throw one of them away.

JackTheKnife Over a year ago

@KevinB is correct - result is the same as w/o deep

user6749601 Over a year ago

And what about this: stackoverflow.com/questions/18498801/…

Arun · Accepted Answer · 2018-07-09 15:53:07Z

0

Merge two objects x and y deeply, returning a new merged object with the elements from both x and y.

https://www.npmjs.com/package/deepmerge

http://jsfiddle.net/d38L6uhs

answered Jul 9, 2018 at 15:53

Arun

511 silver badge8 bronze badges

1 Comment

JackTheKnife Over a year ago

Interesting option

Collectives™ on Stack Overflow

Merge two JSON objects containing arrays using jQuery

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related