Combinar JSON

Relacionats

Què és la combinació de JSON (JSON Merge)?

Casos d'ús

• Combinar les respostes de diverses API de microserveis en una estructura JSON unificada per al frontend
• Agregar fitxers de configuració de múltiples capes base/dev/prod i generar la configuració final per entorn
• Combinar, deduplicar i completar diversos fitxers de traducció i18n per idioma en un diccionari complet
• Fusionar diversos arrays de dades mock o respostes paginades d'API en un conjunt de dades complet
• En components frontend, combinar la configuració per defecte, la de l'usuari i la d'experiments A/B remots
• En migracions de dades, combinar fitxers d'exportació JSON de diversos sistemes font i unificar-los en un format de destinació

Com usar-ho

1. Enganxa successivament de 2 a N fragments de JSON que vulguis combinar en els camps d'entrada de l'esquerra (2 per defecte), o fes clic a «+» per afegir més entrades
2. Al desplegable de la barra d'eines, selecciona l'estratègia de combinació: Deep Merge (fusió profunda) / Shallow Merge (fusió superficial) / Array Concat (concatenació) / Array Replace (substitució)
3. Fes clic al botó «Combina»; el camp de sortida de la dreta mostrarà el resultat formatat de la combinació; si hi ha errors de sintaxi es mostrarà el número de línia concret i el missatge d'error
4. Un cop verificat el resultat, fes clic a «Copia» per posar el resultat al porta-retalls, o a «Descarrega» per desar-lo com a fitxer merged.json i continuar amb el formatat, validació d'esquemes i altres processos posteriors

Característiques

• 4 estratègies de combinació: Deep Merge / Shallow Merge / Array Concat / Array Replace, commutables amb un clic per satisfer diferents escenaris de negoci
• Suport de 2 a N fragments de JSON: 2 camps d'entrada per defecte, amb el botó «+» es poden afegir dinàmicament més fonts JSON, adaptant-se flexiblement a l'agregació multi-font
• Fusió recursiva profunda: processa intel·ligentment objectes multi-niats, resol conflictes de nodes fulla segons l'estratègia seleccionada i conserva tots els camps vàlids
• Resolució flexible de conflictes: els conflictes de nivell superior s'executen segons l'estratègia triada; els conflictes en objectes niats entren en fusió profunda; els conflictes d'arrays es tracten diferenciant entre arrayConcat i arrayReplace
• Sortida amb format unificat: el resultat combinat es mostra amb sagnia de 2 espais, facilitant la revisió manual i la còpia directa a eines posteriors
• Combinació en temps real: en enganxar i fer clic a «Combina» s'obté el resultat a l'instant; en cas d'error es mostra el número de línia concret i el missatge d'error
• Processament local per protegir la privacitat: l'anàlisi, la combinació i el formatat es fan completament al navegador, sense enviar el contingut a cap servidor
• Continuïtat amb eines posteriors: el resultat combinat es pot copiar amb un clic a eines de formatat JSON, validació d'esquemes, generació de codi i més

Exemples de codi

// npm install lodash.merge
import merge from 'lodash.merge';

const a = { user: { name: 'Alice', age: 28 }, tags: ['admin'] };
const b = { user: { email: 'a@x.com', age: 29 }, tags: ['editor'] };

// Fusió profunda: els objectes niats es combinen recursivament, els nodes fulla se sobreescriuen per l'última entrada
const deep = merge({}, a, b);
console.log(deep);
// => { user: { name: 'Alice', age: 29, email: 'a@x.com' }, tags: ['admin', 'editor'] }

// Fusió superficial: les claus de nivell superior se sobreescriuen completament, no s'entra en els niats
const shallow = Object.assign({}, a, b);
console.log(shallow);
// => { user: { email: 'a@x.com', age: 29 }, tags: ['editor'] }

# pip install mergedeep
from mergedeep import merge

a = {"user": {"name": "Alice", "age": 28}, "tags": ["admin"]}
b = {"user": {"email": "a@x.com", "age": 29}, "tags": ["editor"]}

# Fusió profunda
result = merge(a, b)
print(result)
# => {'user': {'name': 'Alice', 'age': 29, 'email': 'a@x.com'}, 'tags': ['admin', 'editor']}

# Nota: mergedeep per defecte combina arrays i sobreescriu cadenes/números
# Per sobreescriure arrays, afegeix strategy='override'

# Combina diversos arrays JSON en un array llarg
jq -s 'add' a.json b.json c.json

# Combina recursivament diversos objectes JSON (jq 1.6+)
jq -s 'reduce .[] as $item ({}; . * $item)' a.json b.json

# Fusió superficial: sobreescriu les claus de nivell superior de b sobre a
jq -s '.[0] * .[1]' a.json b.json

# Després de combinar arrays, conserva només els camps id únics
jq -s '[.[].items[]] | unique_by(.id)' a.json b.json

Preguntes freqients

Solució de problemes

Glossari

JSON Merge

Operació de fusionar dos o més objectes JSON en un de nou segons regles especificades; el repte clau és "l'estratègia de resolució quan hi ha conflicte de claus".

Deep Merge / Fusió profunda

Estratègia que entra recursivament en objectes niats i combina cada node fulla per separat; quan ambdós costats són objectes plans es recorre, altrament se sobreescriu.

Shallow Merge / Fusió superficial

Estratègia que només combina les claus de nivell superior i sobreescriu completament les claus homònimes; en JS equival a `Object.assign({}, a, b)`.

Array Concat / Concatenació d'arrays

Una de les estratègies de combinació d'arrays: fusiona diversos arrays en un de sol mantenint l'ordre de tots els elements; s'usa sovint per a l'agregació de respostes d'API.

Array Replace / Substitució d'arrays

Una de les estratègies de combinació d'arrays: els arrays homònims se sobreescriuen completament amb els de l'última entrada; s'usa sovint per a sobreescriptura de configuracions.

Object.assign

Mètode integrat de JavaScript que copia superficialment totes les propietats enumerables pròpies d'un o més objectes font a l'objecte destí; la implementació de referència de la fusió superficial.

lodash.merge

Funció de fusió profunda proporcionada per la llibreria Lodash; la implementació de deep merge més utilitzada en l'ecosistema Node.js; combina arrays en lloc de sobreescriure'ls.

mergedeep (Python)

Llibreria de fusió profunda de l'ecosistema Python, s'instal·la amb pip install mergedeep; admet el paràmetre strategy per controlar el comportament de combinació/sobreescriptura d'arrays.

jq -s 'add'

Comanda jq que suma diversos arrays JSON en un de sol; per combinar objectes JSON cal utilitzar `reduce .[] as $item ({}; . * $item)`.

BFF (Backend for Frontend)

Capa d'agregació situada entre el frontend i els serveis backend en arquitectures de microserveis; sovint necessita combinar les respostes JSON de diversos serveis en una resposta unificada, un escenari clàssic de combinació JSON.

Comparació de les 4 estratègies de combinació JSON

Taula comparativa d'implementacions habituals

Authoritative References

• MDNObject.assign - Documentació web de MDN
• LodashDocumentació oficial de Lodash _.merge
• jqManual oficial de jq - reduce i add
• IETFEspecificació oficial JSON (RFC 8259)