Fusionner deux éléments de données incompatibles avec immutable.js?

Question

J'ai un morceau de données JSON que j'utilise pour générer dynamiquement une forme et il ressemble à ceci:

{ 
    "form": { 
    "fields": [ 
     { 
     "name": "First Name", 
     "alt": "first_name" 
     }, 
     { 
     "name": "Last Name", 
     "alt": "last_name" 
     }, 
     { 
     "name": "D.O.B.", 
     "alt": "dob" 
     }, 
     { 
     "name": "Primary Address", 
     "alt": "primary_address" 
     }, 
     { 
     "name": "Primary City", 
     "alt": "primary_city" 
     }, 
     { 
     "name": "ZIP Code", 
     "alt": "zip" 
     }, 
     { 
     "name": "Country", 
     "alt": "country" 
     }, 
     { 
     "name": "First 4 Phone Digits", 
     "alt": "first_phone" 
     }, 
     { 
     "name": "Phone Number", 
     "alt": "phone_number" 
     } 
    ] 
    }, 
    "someVal": [], 
    "someVal2": "a string" 
} 

Quand je soumets ce formulaire et il y a des erreurs, je les erreurs renvoyées dans le format suivant:

[ 
     { 
     "alt": "primary_city", 
     "errors": [ "primary_city Error Message" ] 
     }, 
     { 
     "alt": "zip", 
     "errors": [ "zip Error Message" ] 
     }, 
     { 
     "alt": "first_name", 
     "errors": [ "first_name Error Message" ] 
     }, 
     { 
     "alt": "dob", 
     "errors": [ "dob Error Message" ] 
     }, 
     { 
     "alt": "primary_address", 
     "errors": [ "primary_address Error Message" ] 
     }, 
     { 
     "alt": "last_name", 
     "errors": [ "last_name Error Message" ] 
     } 
    ] 

Mon but est de fusionner les deux pour obtenir ce format, de fusionner les erreurs où le match alts:

{ 
     "form": { 
     "fields": [ 
      { 
      "name": "First Name", 
      "alt": "first_name", 
      "errors": [ "first_name Error Message" ] 
      }, 
      { 
      "name": "Last Name", 
      "alt": "last_name", 
      "errors": [ "last_name Error Message" ] 
      }, 
      { 
      "name": "D.O.B.", 
      "alt": "dob", 
      "errors": [ "dob Error Message" ] 
      }, 
      { 
      "name": "Primary Address", 
      "alt": "primary_address", 
      "errors": [ "primary_address Error Message" ] 
      }, 
      { 
      "name": "Primary City", 
      "alt": "primary_city", 
      "errors": [ "primary_city Error Message" ] 
      }, 
      { 
      "name": "ZIP Code", 
      "alt": "zip", 
      "errors": [ "zip Error Message" ] 
      }, 
      { 
      "name": "Country", 
      "alt": "country" 
      }, 
      { 
      "name": "First 4 Phone Digits", 
      "alt": "first_phone" 
      }, 
      { 
      "name": "Phone Number", 
      "alt": "phone_number" 
      } 
     ] 
     }, 
     "someVal": [], 
     "someVal2": "a string" 
    } 

jusqu'à présent, j'ai essayé de d o les éléments suivants:

import { fromJS, Map, List } from 'immutable'; 

import form from './json/form.json' 
import config from './json/errors.json' 

let list = new List([]) 

list.merge(fromJS(config), fromJS(form)); 

console.log(list); 

console.log(list.toJS()) 
// console.log(JSON.stringify(newList, null, 2)) 

Et je n'obtenir le résultat suivant:

List [] 
[] 

Je n'ai honnêtement aucune idée de comment commencer à fusionner ces derniers et la documentation n'est pas d'un grand secours non plus.

Answer 1

Tout d'abord, vous devez comprendre le concept de l'immuabilité il

let list = new List([]) 

const mergedList = list.merge(fromJS(config), fromJS(form)); 

console.log(list); // prints empty list 

immutabilité signifie que les données d'origine ne sont pas mis à jour (par exemple mutées). Dans votre exemple, cela signifie que l'objet original list sera toujours vide. Mais .merge() vous renvoie une nouvelle liste qui a un résultat de l'opération de fusion.

Ensuite, vous verrez que les listes dans Immutable sont fusionnées par index. Regardez cet exemple trivial

const a = new List([{a: 1}, {a: 2}]); 
const b = new List([{b: 3}, {b: 4}]); 

const merged = a.merge(b); 

console.log(merged.toJS()) 
// [{a: 1, b: 3}, {a: 2, b: 4}] 

Si vous souhaitez fusionner non par index, mais votre identifiant spécifique, vous devez transférer vos enregistrements dans la carte, calée par alt champ:

import form from './json/form.json' 
import config from './json/errors.json' 

const formByField = form.reduce(
    (total, field) => ({...total, [field.alt]: field}), 
    {} 
); 
const configByField = config.reduce(
    (total, field) => ({...total, [field.alt]: field}), 
    {} 
); 

// then you can merge two Maps together 

const result = new Map().mergeDeep(fromJS(formByField), fromJS(configByField)); 

Note, que vous devez également utiliser mergeDeep pour le rendre récursif pour chaque clé correspondante