1
votes

javascript fusionne deux objets par nom de clé

Disons que j'ai les deux objets suivants:

var c = {
  "abc": {
    "111": {
       name: "jon"
    }
  },
  "xyz": {
    "222": {
       name: "bill"
    },
    "333": {
       name: "mary"
    }
  }
}

Je veux ensuite créer un nouvel objet pour fusionner les deux par le nom de clé de niveau supérieur. Donc, pour obtenir quelque chose comme ça:

var a = {
  "abc": {
    "111": {
       name: "jon"
    }
  },
  "xyz": {
    "222": {
       name: "bill"
    }
  }
}

var b = {
  "xyz": {
    "333": {
       name: "mary"
    }
  }
}

J'imagine que c'est probablement quelque chose que vous faites avec .map () , .each () ou .reduce () ? Est-ce que jQuery serait utile dans ce cas? si oui, comment?

javascript jquery

4 commentaires

Pourquoi pensez-vous avoir besoin de jQuery ici?

@CodeManiac, je pense en fait que ce n'est pas nécessaire, mais je ne suis peut-être pas au courant d'une fonction jQuery qui permettrait de gagner du temps. Je voulais juste le mentionner car j'utilise jQuery.

Cela peut être simplement réalisé avec JS natif, si vous utilisez loadash , vous pouvez vous attendre à une fonction déjà construite pour de tels cas, mais IMO il n'est pas nécessaire d'utiliser une bibliothèque complète où, comme vous pouvez le faire simplement boucles simples, si vous utilisez déjà, alors ça va, laissez-moi voir si une telle fonction est disponible dans jQuery

Il existe deux fonctions extend et merge mais aucun d'entre eux ne peut être utilisé directement dans ce cas, vous devez effectuer une boucle les clés et ensuite les fusionner

3 Réponses :

4
votes

Vous pouvez simplement utiliser Object.entries () et Array.reduce () ,

L'idée principale est d'itérer sur les deux tableaux et de maintenir une carte.

Parcourez le premier objet et créez une carte de toutes ses propriétés.
Ensuite, parcourez le deuxième objet, et pour chacune de ses propriétés, vérifiez s'il est présent dans la carte ou non, s'il est présent, fusionnez les deux, sinon ajoutez-le simplement.

var a = { "abc": { "111": { name: "jon" } }, "xyz": { "222": { name: "bill" } } }
var b = { "xyz": { "333": { name: "mary" } } };

Object.entries(a).forEach(([key, value])=>{
  b[key] = Object.assign(b[key] || {}, value);
});

console.log(b);

Si vous pouvez utiliser l'un de vos objets existants, une solution simple peut être:

var a = { "abc": { "111": { name: "jon" } }, "xyz": { "222": { name: "bill" } } }
var b = { "xyz": { "333": { name: "mary" } } };

let result = Object.entries(a).reduce((acc,[key, value]) => (acc[key] = value,acc),{});
Object.entries(b).reduce((acc,[key, value]) => (acc[key] =acc[key] && Object.assign(acc[key], value)|| value,acc),result);

console.log(result);

1 commentaires

Je vote pour parce que cela répond à la question et est une solution propre, mais ce serait bien de voir une explication sur la raison pour laquelle ce code résout la question (puisque le code est très réduit, il s'avère difficile à comprendre en lisant simplement le code )

0
votes

pourriez-vous utiliser la déstructuration d'objets es6?

var a = {
  "abc": {
    "111": {
       name: "jon"
    }
  },
  "xyz": {
    "222": {
       name: "bill"
    }
  }
}

var b = {
  "xyz": {
    "333": {
       name: "mary"
    }
  }
}

   const c = {abc: a.abc, xyz: [a.xyz, b.xyz]};
    console.log(c);

0 commentaires

2
votes

Si vous utilisez déjà jQuery ou Lodash dans votre projet, vous pouvez utiliser $. étendre ou _.merge a> respectivement. Il n'est pas nécessaire de réinventer la roue lorsque vous utilisez déjà l'une de ces bibliothèques.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

var a = { "abc": { "111": { name: "jon" } }, "xyz": { "222": { name: "bill" } } };
var b = { "xyz": { "333": { name: "mary" } } };

console.log($.extend(true, {}, a, b));
console.log(_.merge({}, a, b));
console.log("a =", a);
console.log("b =", b);

2 commentaires

Je ne peux accepter qu'une seule réponse, mais cette réponse est également correcte et utile.

@Ben np, un vote positif suffit pour marquer une réponse comme utile.