Merge two json/javascript arrays in to one array

I have two json arrays like

var json1 = [id:1, name: 'xxx' ...]
var json2 = [id:2, name: 'xyz' ...]


I want them merge in to single arrays

var finalObj = [id:1, name: 'xxx' ...,id:2, name: 'xyz' ...]


Regards

[ "id": 1, "name": 6 ]

10 Answers
10

You want the concat method.

concat

var finalObj = json1.concat(json2);


json1

json2

Upon first appearance, the word "merg" leads one to think you need to use .extend, which is the proper jQuery way to "merge" JSON objects. However, $.extend(true, , json1, json2); will cause all values sharing the same key name to be overridden by the latest supplied in the params. As review of your question shows, this is undesired.

$.extend(true, , json1, json2);

What you seek is a simple javascript function known as .concat. Which would work like:

var finalObj = json1.concat(json2);


While this is not a native jQuery function, you could easily add it to the jQuery library for simple future use as follows:

;(function($)
if (!$.concat)
$.extend(
concat: function()
return Array.prototype.concat.apply(, arguments);

);

)(jQuery);


And then recall it as desired like:

var finalObj = $.concat(json1, json2);


You can also use it for multiple array objects of this type with a like:

var finalObj = $.concat(json1, json2, json3, json4, json5, ....);


And if you really want it jQuery style and very short and sweet (aka minified)

;(function(a))(jQuery);


;(function($)$.concat)(jQuery);

$(function()
var json1 = [id:1, name: 'xxx'],
json2 = [id:2, name: 'xyz'],
json3 = [id:3, name: 'xyy'],
json4 = [id:4, name: 'xzy'],
json5 = [id:5, name: 'zxy'];

console.log(Array(10).join('-')+'(json1, json2, json3)'+Array(10).join('-'));
console.log($.concat(json1, json2, json3));
console.log(Array(10).join('-')+'(json1, json2, json3, json4, json5)'+Array(10).join('-'));
console.log($.concat(json1, json2, json3, json4, json5));
console.log(Array(10).join('-')+'(json4, json1, json2, json5)'+Array(10).join('-'));
console.log($.concat(json4, json1, json2, json5));
);

center padding: 3em;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<center>See Console Log</center>

jsFiddle

concat

var finalObj = .concat(json1, json2, json3, json4, json5, ....);

You could try merge

var finalObj = $.merge(json1, json2);


Since you are using jQuery. How about the jQuery.extend() method?

http://api.jquery.com/jQuery.extend/

Description: Merge the contents of two or more objects together into the first object.

Maybe, you can use the array syntax of javascript :

var finalObj =[json1 , json2]


You can do this using Es 6 new feature :

var json1 = [id:1, name: 'xxx' , ocupation : 'Doctor' ];

var json2 = [id:2, name: 'xyz' ,ocupation : 'SE'];

var combineJsonArray = [...json1 , ...json2];

//output should like this [ id: 1, name: 'xxx', ocupation: 'Doctor' ,
id: 2, name: 'xyz', ocupation: 'SE' ]


Or You can put extra string or anything between two json array :

var json3 = [...json1 ,"test", ...json2];

// output should like this : [ id: 1, name: 'xxx', ocupation: 'Doctor' ,
'test',
id: 2, name: 'xyz', ocupation: 'SE' ]


You can achieve this using Lodash _.merge function.

_.merge

var json1 = [id:1, name: 'xxx'];
var json2 = [id:2, name: 'xyz'];
var merged = _.merge(_.keyBy(json1, 'id'), _.keyBy(json2, 'id'));
var finalObj = _.values(merged);

console.log(finalObj);

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>

You can use the new js spread operator if using es6:

var json1 = [id:1, name: 'xxx']
var json2 = [id:2, name: 'xyz']
var finalObj = [...json1, ...json2]

console.log(finalObj)

Try the code below, using jQuery extend method:

var json1 = "name":"ramesh","age":"12";

var json2 = "member":"true";

document.write(JSON.stringify($.extend(true,,json1,json2)))


var json1=["Chennai","Bangalore"];
var json2=["TamilNadu","Karanataka"];

finaljson=json1.concat(json2);


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.