オブジェクト内の同じキーを持つ値のみ足し合わせたい【React】

Question

前提

React/TypeScriptでアプリを作っています。
メニューをクリックすると、お買い物リスト一覧が生成されるようなものです。

実現したいこと

オブジェクト内の同じキーを持つ値のみ足し合わせ、出力したいです。

該当のデータ

画像内では、mince,onion,tinnedTomatoの3つのキーのみですが、ニンジンやきのこなどランダムなキーが入ります。

Answer 1

オブジェクトの配列が与えられたときにキーごとの合計値をもつオブジェクトを作る（javascriptの）コードを回答します。

たとえば配列 aryが以下のようなものだったとします。

[
  { a: 1, b: 2, c: 3 },
  { b: 1, d: 2 },
  { a: 2, c: 1, e: 4 }
]

このときに、以下のようなオブジェクト total

{ a: 3, b: 3, c: 4, d: 2, e: 4 }

を得るにはたとえば以下のようにします。

const total = ary.reduce(
  (s1, e) => Object.entries(e).reduce(
    (s2, [k, v]) => ({
      ...s2,
      [k]: (s2[k] || 0) + v
    }),
    s1
  ), {}
);

質問にあるコードに上記を使おうとすれば、まずはmealDataの各要素の ingredience を要素とする配列を作ってそれに上記のコードを適用するとよいでしょう。

追記

lodashの _.mergeWith を使うと、以下によってaryからtotalを得られます。

const total = ary.reduce((s, e) => _.mergeWith(s, e, (x=0, y) => x + y), {});

• 👉 https://codepen.io/su507/pen/ExLxBQj?editors=0012

Comments

[emi2022]

おかげさまで、解決いたしました。
メソッドやライブラリの存在を知らなかったので、大変勉強になりました。
ありがとうございます！