オブジェクトの一部マージ

Question

オブジェクトの一部をマージしたい場合にどうすればいいか教えていただきたいです。

const item = {
  fruits: {
    status :"B",
    apple: {
      color: "red"
    },
    banana: {
      color: "yellow"
    },
    strawberry: {
      color: "red"
    }
  }
};

const item2 = {
  fruits: {
    id: 21,
    status :"C",
    apple: {
      id: 13,
      color: "blue"
    },
    banana: {
      id: 12,
      color: "green"
    },
    strawberry: {
      id: 17,
      color: "red"
    }
  }
};

このような構造似た２つのオブジェクトがあった場合に、下記のようなitem1にitem2のidに当たる部分だけ追加するにはどうすればいいでしょうか。

const item3 = {
  fruits: {
    id: 21,
    status :"B",
    apple: {
      id: 13,
      color: "red"
    },
    banana: {
      id: 12,
      color: "yellow"
    },
    strawberry: {
      id: 17,
      color: "red"
    }
  }
};

Object.assign()を使ってみたのですがid以外の箇所も変わってしまうので、方法がありましたら教えていただきたいです。

よろしくお願いいたします。

Answer 1

繰り返し処理で対応して下さい。

1. Object.keys でキーを配列化
2. 繰り返し処理
3. in 演算子で item に存在して、item2 に存在しないキー値を探して代入

Re: eeengineeeeeeer さん

Answer 2

再帰的なマージが知りたいという知的好奇心寄りな動機で、
テストデータを適当に作って用意してきただけだと思います。
一応おまけとして下に追加しますが、現実的にはそんな用途はほぼありません。

何故ならデータが汚すぎるからです。
IDとstatusと各種フルーツの名前が一つのオブジェクトにある時点でおぞましい……

しかし我々ITエンジニアの仕事は情報処理です。
こんなぐちゃぐちゃなデータじゃバグも大量に出ますし、
コードも無駄に増えますから相当読みづらくなるでしょう。

逆に言えばデータにちゃんと指向性をもたせれば今回のような要望も99%程度の割合で抑え込めるのです。
段取り八分はITエンジニアも同様です。
Array.prototype.mapやLocashなんかも駆使すればいくらでもデータは加工出来るわけですからね。

const fruitList = {
  status :"B",
};
const fruits = [
  {name: "apple", color: "red"},
  {name: "banana", color: "yellow"},
  {name: "strawberry", color: "red"}
]; // オブジェクトの配列は凄まじく扱い安く効率が良い

// ああ、アイテム2がこれだったらどんなに楽だっただろうか……
const fruitListId = 21;
const fruitIdList = {
  apple: 13,
  banana: 12,
  strawberry: 17
};

const result = {
  ...fruitList,
  id: fruitListId,
  fruits: fruits.map(fruit => ({
    id: fruitIdList[fruit.name],
    ...fruit,
  }))
}
console.log(JSON.stringify(result, null, 2));

結果

{
  "status": "B",
  "id": 21,
  "fruits": [
    {
      "id": 13,
      "name": "apple",
      "color": "red"
    },
    {
      "id": 12,
      "name": "banana",
      "color": "yellow"
    },
    {
      "id": 17,
      "name": "strawberry",
      "color": "red"
    }
  ]
}

---

それでも初期でもらえるデータ型がitemとitem2しかないという前提ならば
頑張って上記のデータになるように加工するのが最も楽です。

const item = {
  fruits: {
    status :"B",
    apple: {
      color: "red"
    },
    banana: {
      color: "yellow"
    },
    strawberry: {
      color: "red"
    }
  }
};
const item2 = {
  fruits: {
    id: 21,
    status :"C",
    apple: {
      id: 13,
      color: "blue"
    },
    banana: {
      id: 12,
      color: "green"
    },
    strawberry: {
      id: 17,
      color: "red"
    }
  }
};
const itemColumns = ["id", "status"];

const fruitsList = Object.fromEntries(
  Object
    .entries(item.fruits)
    .filter(([key]) => itemColumns.includes(key))
);
// {status: "B"}

const fruites = Object.entries(item.fruits)
  .filter(([key]) => !itemColumns.includes(key))
  .map(([key, values]) => ({_name: key, ...values}));
// [
//   {
//     "_name": "apple",
//     "color": "red"
//   },
//   {
//     "_name": "banana",
//     "color": "yellow"
//   },
//   {
//     "_name": "strawberry",
//     "color": "red"
//   }
// ]

const fruitIds = Object.fromEntries(
  Object.entries(item2.fruits)
    .filter(([key]) => !itemColumns.includes(key))
    .map(([key, val]) => [key, val.id])
);
// {apple: 13, banana: 12, strawberry: 17}

const item3 = {
  id: item2.fruits.id,
  ...fruitsList,
  ...Object.fromEntries(
    fruites.map(fruit => [
      fruit._name,
      Object.fromEntries([
        ['id', fruitIds[fruit._name]],
        ...Object.entries(fruit).filter(([key]) => key != '_name')
      ])
    ])
  )
}
console.log(JSON.stringify(item3, null, 2));

{
  "id": 21,
  "status": "B",
  "apple": {
    "id": 13,
    "color": "red"
  },
  "banana": {
    "id": 12,
    "color": "yellow"
  },
  "strawberry": {
    "id": 17,
    "color": "red"
  }
}

---

【おまけ】 機械的にマージすれば良いだけなら

Lodashのgetとsetを覚えるのが先ですかね。

Online Lodash TesterというサイトでLodashの動作を確認出来ます

result = _.set({}, 'a.b.c', 123);
// {"a": {"b": {"c": 123}}}

JavaScriptは全ての型でプロパティにアクセス出来ますが、
nullとundefinedのみプロパティを所持することもアクセスを試みることも不可能でエラーになってしまいます。
なのでキーをネストさせる場合はいちいちobj.a = {}; obj.a.b = {}; obj.a.b.c = 123;みたいに書かなければならないのですが、
Lodashのsetはその辺に対応しているわけですね。

後は再帰的に掘ってキーを見つける関数を用意するだけです。

const isObject = (obj, key) => {
  if (_.isArray(obj[key])) return false;
  if (_.isObject(obj[key])) return true;
  return false;
}
const recursiveKeys = obj => [
  ...Object.keys(obj).filter(key => !isObject(obj, key)),
  ..._.flatten(
    Object.keys(obj)
      .filter(key => isObject(obj, key))
      .map(key => recursiveKeys(obj[key]).map(it => `${key}.${it}`))
  )
]
const item = {
  fruits: {
    status :"B",
    apple: {
      color: "red"
    },
    banana: {
      color: "yellow"
    },
    strawberry: {
      color: "red"
    }
  }
};
result = recursiveKeys(item);

[
   "fruits.status",
   "fruits.apple.color",
   "fruits.banana.color",
   "fruits.strawberry.color"
]

同じようにitem2を調査したらご覧のような結果に

[
   "fruits.id",
   "fruits.status",
   "fruits.apple.id",
   "fruits.apple.color",
   "fruits.banana.id",
   "fruits.banana.color",
   "fruits.strawberry.id",
   "fruits.strawberry.color"
]

後は空のオブジェクト作って、
for文かなんかでitem2→itemの順番で_.setを使って適用していくだけで完成します。
ただまぁ、オブジェクト判定の辺りが私の作った関数は手抜きして作ったレベルなので、
商用利用するレベルになると全然足りません。

Date型のインスタンスとか混じると空中分解すると思います。
なので全くおすすめしませんし、保証も出来ません。

従って所詮おまけレベルと考えて、再帰的なマージよりはきっちりデータ型を取り決めて
綺麗なデータでやり取りするべきでしょう。