web-dev-qa-db-ja.com

Lodashを使用したディープマージ

ラベルを持つアドレスと実際のアドレスのオブジェクトを含むオブジェクトの2つの配列があります。

_var originalAddresses = [
  {
    label: 'home',
    address: { city: 'London', zipCode: '12345' }
  },
  {
    label: 'work',
    address: { city: 'New York', zipCode: '54321' }
  }
];

var updatedAddresses = [
  {
    label: 'home',
    address: { city: 'London (Central)', country: 'UK' }
  },
  {
    label: 'spain',
    address: { city: 'Madrid', zipCode: '55555' }
  }
];
_

ここで、これらの配列をlabelでマージし、アドレスの個々のプロパティを比較し、実際に存在する新しいアドレスのプロパティのみをマージします。したがって、結果は次のようになります。

_var result = [
  {
    label: 'home',
    address: { city: 'London (Central)', zipCode: '12345', country: 'UK' }
  },
  {
    label: 'work',
    address: { city: 'New York', zipCode: '54321' }
  },
  {
    label: 'spain',
    address: { city: 'Madrid', zipCode: '55555' }
  }
]
_

lodash ？を使用してこれを行うにはどうすればよいですか？unionBy()とmerge()。 unionBy（）を使用すると、ラベルごとに配列を比較および結合できましたが、これにより常にオブジェクト全体が置き換えられます。私は確かにアドレスをマージすることができますが、これはラベルによって起こりません。

javascriptarraysmergelodash
13
benjiman

_.keyBy(arr, 'label') を使用して両方の配列をオブジェクトに変換してから、 _.merge() を使用して深くマージできます。

var originalAddresses = [{
  label: 'home',
  address: {
    city: 'London',
    zipCode: '12345'
  }
}, {
  label: 'work',
  address: {
    city: 'New York',
    zipCode: '54321'
  }
}];

var updatedAddresses = [{
  label: 'home',
  address: {
    city: 'London (Central)',
    country: 'UK'
  }
}, {
  label: 'spain',
  address: {
    city: 'Madrid',
    zipCode: '55555'
  }
}];

var result = _.values(_.merge(
  _.keyBy(originalAddresses, 'label'),
  _.keyBy(updatedAddresses, 'label')
));

console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
18
Ori Drori