Слияние двух частей несоответствующих данных с immutable.js?

Question

У меня есть кусок данных JSON, который я использую для динамического создания формы, и это выглядит так:

{ 
    "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" 
} 

Когда я представить эту форму, и есть ошибки, я возвращаемые ошибки в следующем формате:

[ 
     { 
     "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" ] 
     } 
    ] 

Моя цель состоит в том, чтобы объединить два, чтобы получить этот формат, чтобы объединить ошибки, где альтов матч:

{ 
     "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" 
    } 

до сих пор я пытался г о следующем:

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

И я только получаю следующий вывод:

List [] 
[] 

Я честно не знаю, как начать слияние этих и документация не очень помогает либо.

Answer 1

Прежде всего, вы должны понять концепцию неизменности там

let list = new List([]) 

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

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

Неизменность означает, что исходные данные не обновляются (например мутантный). В вашем примере это означает, что исходный объект list по-прежнему будет пустым. Но .merge() возвращает вам новый список, который имеет результат операции слияния.

Затем вы увидите, что списки в Immutable объединены по индексу. Посмотрите на этот тривиальный пример

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

Если вы хотите, чтобы объединить его не по индексу, но вашим определенным идентификатором, вы должны передать свои записи в карте, введенные на alt поле:

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

Примечание, что вы также должны использовать mergeDeep, чтобы сделать его рекурсивным для каждого подходящего ключа