Merge two json/javascript arrays in to one array

JavascriptJqueryJson

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

You want the concat method.

var finalObj = json1.concat(json2);

Solution 2 - Javascript

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.

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){a.concat||a.extend({concat:function(){return Array.prototype.concat.apply([],arguments);}})})(jQuery);

;(function($){$.concat||$.extend({concat:function(){return Array.prototype.concat.apply([],arguments);}})})(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

Solution 3 - Javascript

You could try merge

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

Solution 4 - Javascript

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.

Solution 5 - Javascript

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

Solution 6 - Javascript

Maybe, you can use the array syntax of javascript :

var finalObj =[json1 , json2]

Solution 7 - Javascript

You can achieve this using Lodash _.merge function.

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/[email protected]/lodash.min.js"></script>

Solution 8 - Javascript

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)

Solution 9 - Javascript

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

Solution 10 - Javascript

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

finaljson=json1.concat(json2);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMurtaza Khursheed HussainView Question on Stackoverflow
Solution 1 - JavascriptQuentinView Answer on Stackoverflow
Solution 2 - JavascriptSpYk3HHView Answer on Stackoverflow
Solution 3 - JavascriptizbView Answer on Stackoverflow
Solution 4 - JavascriptKris KrauseView Answer on Stackoverflow
Solution 5 - JavascriptHoque MD ZahidulView Answer on Stackoverflow
Solution 6 - JavascriptJérôme BView Answer on Stackoverflow
Solution 7 - JavascriptPenny LiuView Answer on Stackoverflow
Solution 8 - JavascriptMailyanView Answer on Stackoverflow
Solution 9 - JavascriptDEEPAK PRABHUView Answer on Stackoverflow
Solution 10 - JavascriptVinoth SmartView Answer on Stackoverflow