JSでオブジェクトのキーが同じ項目の配列を結合したい

Question

下記のようなオブジェクトをもつ配列 fees があったとします。
この配列を nameが同じものでdescriptionを配列にまとめる ようなプログラムを書きたいです。

fees: [
      {
        name: '特別',
        description: `3,000円`,
      },
      {
        name: '特別',
        description: `100,000円`,
      },
      {
        name: 'ロイヤル',
        description: 'ロイヤル1',
      },
      {
        name: '特別',
        description: `6,000円`,
      },
      {
        name: '普通',
        description: '普通1',
      },
      {
        name: 'ロイヤル',
        description: 'ロイヤル2',
      },
      {
        name: '普通',
        description: '普通2',
      },
    ],

関数 stateBind(fees) を通した feesは以下のように形になっていて欲しいです。

fees: [
      {
        name: '特別',
        description: [`3,000円`, `100,000円`, `6,000円`],
      },
      {
        name: 'ロイヤル',
        description: ['ロイヤル1', 'ロイヤル2'],
      },
      {
        name: '普通',
        description: ['普通1', '普通2']
      },
    ],

やり方がわかりません。教えていただけると幸いです。よろしくお願いいたします。

Comments

[yambejp]

nameが1つしか無いものは文字列で返すのでしょうか？一つだけ入った配列で返すのでしょうか？

Answer 1

まぁ今回のケースは確かに配列→配列なので、
まともに戦うと相当辛いでしょう。

私のような上級者になればLodashなど使わなくてもreduceで一撃ですけど、
相応にコードが汚れるので「日本語でおｋ」と言いたくなることでしょう。

---

というわけで値の加工がしたければLodashを覚えてください。
このやり方は関数型言語を始めとする多くのモダンな言語へ持っていける概念です。

つまり、Lodashの機能を全て読み込む事でモダンなエンジニアとしての能力が開花します。

nameが同じものでdescriptionを配列にまとめる

LodashではgroupByという機能で実現できます。
Online Lodash Testerで挙動を確認できます。

// _.groupBy(配列, fn)
// fn: 戻り値が文字列になる関数

const fees = [
  {name: '特別', description: `3,000円`},
  {name: '特別', description: `100,000円`},
  {name: 'ロイヤル', description: 'ロイヤル1'},
  {name: '特別', description: `6,000円`},
  {name: '普通', description: '普通1'},
  {name: 'ロイヤル', description: 'ロイヤル2'},
  {name: '普通', description: '普通2'},
];
result = _.groupBy(fees, it => it.name);

{
   "特別": [
      {
         "name": "特別",
         "description": "3,000円"
      },
      {
         "name": "特別",
         "description": "100,000円"
      },
      {
         "name": "特別",
         "description": "6,000円"
      }
   ],
   "ロイヤル": [
      {
         "name": "ロイヤル",
         "description": "ロイヤル1"
      },
      {
         "name": "ロイヤル",
         "description": "ロイヤル2"
      }
   ],
   "普通": [
      {
         "name": "普通",
         "description": "普通1"
      },
      {
         "name": "普通",
         "description": "普通2"
      }
   ]
}

これだけでは目的の値にはなりませんが、
特定のルールに従った配列を作るという目的では確実に前進しています。
引き続き別の値加工を行うために次の章へ行きましょう。

---

JavaScriptはそもそもArray->Arrayであればmapというメソッドがあるので簡単に加工出来るのですが、
groupByで作った値はオブジェクトなのでmapメソッドを所持していません。
まぁ、Object.entries()等は持っていますから配列を経由してやれば良いだけなのですが……

Lodashを利用する場合は、
オブジェクトに対してもmapが使えます。
カテゴリが配列を示すListではなく、オブジェクトも両対応のCollectionになっている所からも分かります。

また、Lodashは_.メソッド(値, fn)で数珠つなぎにするとコードが非常に汚くなるので、
チェーン記法に対応しています。

const fees = [
  {name: '特別', description: `3,000円`},
  {name: '特別', description: `100,000円`},
  {name: 'ロイヤル', description: 'ロイヤル1'},
  {name: '特別', description: `6,000円`},
  {name: '普通', description: '普通1'},
  {name: 'ロイヤル', description: 'ロイヤル2'},
  {name: '普通', description: '普通2'},
];
result = _.chain(fees)
  .groupBy(fee => fee.name)
  .map((fees, name) => ({
    name: name,
    description: fees.map(fee => fee.description)
  }))
  .value();

[
   {
      "name": "特別",
      "description": [
         "3,000円",
         "100,000円",
         "6,000円"
      ]
   },
   {
      "name": "ロイヤル",
      "description": [
         "ロイヤル1",
         "ロイヤル2"
      ]
   },
   {
      "name": "普通",
      "description": [
         "普通1",
         "普通2"
      ]
   }
]

---

【おまけ】 reduceで一撃

まぁ、groupByのパターン知ってるエンジニアなら楽勝ですね。
reduceで似たようなものを再現するだけです。
(for文でちくちくやっても良いですが、状態変数が増えて読みづらくなるので一長一短)

ついでに配列ではなくdescriptionの文字列を抜き出した配列を作ってしまえば計算量が減ります。
さらっと書けるようになるためにもLodashは覚えて損はありません。
ぜひ

const fees = [
  {name: '特別', description: `3,000円`},
  {name: '特別', description: `100,000円`},
  {name: 'ロイヤル', description: 'ロイヤル1'},
  {name: '特別', description: `6,000円`},
  {name: '普通', description: '普通1'},
  {name: 'ロイヤル', description: 'ロイヤル2'},
  {name: '普通', description: '普通2'},
];
const result = Object.entries(
  fees.reduce((obj, fee) => {
    if (obj[fee.name] == null) obj[fee.name] = [];
    obj[fee.name].push(fee.description);
    return obj;
  }, {})
).map(([name, description]) => ({name, description}));

console.log(JSON.stringify(result, null, 2));

[
  {
    "name": "特別",
    "description": [
      "3,000円",
      "100,000円",
      "6,000円"
    ]
  },
  {
    "name": "ロイヤル",
    "description": [
      "ロイヤル1",
      "ロイヤル2"
    ]
  },
  {
    "name": "普通",
    "description": [
      "普通1",
      "普通2"
    ]
  }
]

Answer 2

こんな感じではないでしょうか。

feesをループで回して、nameをキー、descriptionを値として持つ単独のオブジェクトを作る。その際、すでにキーが存在するなら、すでにある値の配列に要素を追加する。
オブジェクトができたら、Object.keysでループを回して、オブジェクトの配列にする。

わからない部分があったらコメントしてください。

Answer 3

以下のコードで実現できます。
重複しない名前の配列を用意し、Array.prototype.map()メソッドで各要素を変換するようなイメージです。

const fees = [
  {
    name: '特別',
    description: `3,000円`,
  },
  {
    name: '特別',
    description: `100,000円`,
  },
  {
    name: 'ロイヤル',
    description: 'ロイヤル1',
  },
  {
    name: '特別',
    description: `6,000円`,
  },
  {
    name: '普通',
    description: '普通1',
  },
  {
    name: 'ロイヤル',
    description: 'ロイヤル2',
  },
  {
    name: '普通',
    description: '普通2',
  },
];

var result = Array.from(new Set(fees.map(v => v.name))).map(name => { 
  return {
    name: name,
    description: fees.filter(fee => fee.name === name).reduce((descriptions, cur) => {
      descriptions.push(cur);
      return descriptions;
    }, []),
  }
});

console.log(result);

Answer 4

配列に拘りがなければ、短く、かつ検索コスト(name,description値で検索にかかる時間)を下げる書き方があります。

const map = new Map;

for (let {name, description} of fees) map.has(name) ? map.get(name).add(description) : map.set(name, new Set(description));

Re: van-0215 さん

Answer 5

丸投げ質問は非推奨ですが気が向いたので回答します。

const fees = [
  {
    name: '特別',
    description: `3,000円`,
  },
  {
    name: '特別',
    description: `100,000円`,
  },
  {
    name: 'ロイヤル',
    description: 'ロイヤル1',
  },
  {
    name: '特別',
    description: `6,000円`,
  },
  {
    name: '普通',
    description: '普通1',
  },
  {
    name: 'ロイヤル',
    description: 'ロイヤル2',
  },
  {
    name: '普通',
    description: '普通2',
  },
]

const res = []

for (const fee of fees) {
  const item = res.find(item => fee.name === item.name)
  if (res.find(item => fee.name === item.name)) {
    item.description.push(fee.description)
    continue
  }

  res.push({
    ...fee,
    description: [fee.description],
  })
}

console.log(res)