web-dev-qa-db-fra.com

Fusionner deux tableaux json/javascript dans un tableau

J'ai deux tableaux JSON comme

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

Je veux qu'ils fusionnent dans des tableaux simples

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

Cordialement

javascriptjqueryjson
66
Murtaza Khursheed Hussain

Vous voulez la méthode concat .

var finalObj = json1.concat(json2);
110
Quentin

Lors de sa première apparition, le mot "fusion" laisse penser que vous devez utiliser .extend , qui est le moyen approprié pour "fusionner" les objets JSON. Cependant, $.extend(true, {}, json1, json2); fera en sorte que toutes les valeurs partageant le même nom de clé soient remplacées par les dernières données fournies dans les paramètres. Comme le montre l’examen de votre question, c’est indésirable.

Ce que vous cherchez, c'est une simple fonction javascript appelée .concat . Ce qui fonctionnerait comme:

var finalObj = json1.concat(json2);

Bien qu'il ne s'agisse pas d'une fonction jQuery native, vous pouvez facilement l'ajouter à la bibliothèque jQuery pour une utilisation future simple, comme suit:

;(function($) {
    if (!$.concat) {
        $.extend({
            concat: function() {
                return Array.prototype.concat.apply([], arguments);
            }
        });
    }
})(jQuery);

Et puis rappelez-le comme souhaité comme:

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

Vous pouvez également l'utiliser pour plusieurs objets de type tableau de ce type avec les éléments suivants:

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

Et si vous le voulez vraiment style jQuery et très court et doux (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

37
SpYk3HH

Tu pourrais essayer de fusionner

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

Depuis que vous utilisez jQuery. Que diriez-vous de la méthode jQuery.extend ()?

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

Description: Fusionnez le contenu de deux objets ou plus dans le premier objet.

5
Kris Krause

Vous pouvez le faire en utilisant la nouvelle fonctionnalité Es 6:

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

Ou vous pouvez mettre une chaîne supplémentaire ou autre chose entre deux tableaux json:

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

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

Peut-être que vous pouvez utiliser la syntaxe de tableau de javascript: 

var finalObj =[json1 , json2]
2
Jérôme B

Vous pouvez y parvenir en utilisant la fonction Lodash _.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/[email protected]/lodash.min.js"></script>

0
Yi-Ting Liu

Vous pouvez utiliser le nouvel opérateur js spread si vous utilisez es6:

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

console.log(finalObj)

0
Mailyan