2017-01-18 21 views
0

私は動的にフォームを生成するために使用し、それはそうのように見えるJSONデータの部分があります2つの不一致データをimmutable.jsとマージしますか?

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

私の目標は、ALTの試合のエラーマージするために、このフォーマットを取得するために2つをマージすることです:

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

は、これまでのところ、私はDにしようとしてきたが

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

をそして私は次の出力を得る:O以下

List [] 
[] 

私は正直にこれらをマージ開始するか見当がつかないとドキュメントは、いずれかの多くの助けではありません。

+0

オブジェクト(最初のコードセット)と配列(2番目のコードセット)をマージしようとしています。実際には、最初のコードセットの 'form.fields'プロパティの値を2番目の配列の配列にマージしたいと思うようです... –

+0

また、コードに' altプロパティです。私はそのことについて[この質問](http://stackoverflow.com/q/39908169/215552)への回答を読むことをお勧めします。 –

+0

@MikeMcCaughan私は 'listMerge(fromJS(errors)、fromJS(form.form.fields)); 'を試しましたが、まだ空の配列があります。ちょうどあなたの2番目のコメントを見て、それをチェックしてください。 – eveo

答えて

1

まず第一に、あなたは不変性の概念を理解する必要があり

let list = new List([]) 

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

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

不変性は、元のデータが(例えば突然変異した)更新されていないことを、意味しています。あなたの例では、元のlistオブジェクトはまだ空になることを意味します。しかし、.merge()は、マージ操作の結果を持つ新しいListを返します。

次に、不変のリストがインデックスでマージされていることがわかります。 、

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

注:altフィールドをキーと、地図の中にあなたの記録を転送する必要があり、この簡単な例

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

あなたがいないインデックスではなく、あなたの特定の識別子で、それをマージしたい場合は

を見てください mergeDeepを使用して一致するキーごとに再帰的にすること

関連する問題