JavaScriptで配列内オブジェクトを特定のキーでグループ化

Question

実現したいこと

JavaScriptである配列に格納しているオブジェクトを対象のキーで配列を作成したいです。
何か良い方法ないでしょうか？プレーンのJSでもlodashなどのライブラリを用いても問題ありません。

加工前データ

[
  {fruit: 'apple', price: 100},
  {fruit: 'orange', price: 120},
  {fruit: 'apple', price: 200},
  {fruit: 'orange', price: 130},
  {fruit: 'apple', price: 140},
]

加工後データ

[
  [
    {fruit: 'apple', price: 100},
    {fruit: 'apple', price: 200},
    {fruit: 'apple', price: 140}
  ],
  [
    {fruit: 'orange', price: 120},
    {fruit: 'orange', price: 130}
  ]
]

Answer 1

LodashにgroupByがあるので瞬殺です。

オブジェクトになるじゃねーか！
なのでvaluesと組み合わせましょうね。

Online Lodash Testerで調べてみましょう。
ついでにチェーン記法を使ってかっこよく仕上げます。

const data = [
  {fruit: 'apple', price: 100},
  {fruit: 'orange', price: 120},
  {fruit: 'apple', price: 200},
  {fruit: 'orange', price: 130},
  {fruit: 'apple', price: 140},
];

result = _(data)
  .groupBy(it => it.fruit)
  .values()
  .value()

結果はご覧の通りです。

[
   [
      {
         "fruit": "apple",
         "price": 100
      },
      {
         "fruit": "apple",
         "price": 200
      },
      {
         "fruit": "apple",
         "price": 140
      }
   ],
   [
      {
         "fruit": "orange",
         "price": 120
      },
      {
         "fruit": "orange",
         "price": 130
      }
   ]
]

---

【おまけ】 ネイティブJSで頑張る

ネイティブJSにはgroupByなどという軟弱なものはありませんので、
reduceでチクチク実装する必要があります。

ネイティブJSにもES2017という比較的新しい機能としてObject.values実装されていますので、
一度オブジェクトを経由するのが分かりやすいですね。

const data = [
  {fruit: 'apple', price: 100},
  {fruit: 'orange', price: 120},
  {fruit: 'apple', price: 200},
  {fruit: 'orange', price: 130},
  {fruit: 'apple', price: 140},
];

const result = Object.values(
  data.reduce((obj, it) => {
    if (!obj[it.fruit]) obj[it.fruit] = [];
    obj[it.fruit].push(it);
    return obj;
  }, {})
);

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

結果

[
  [
    {
      "fruit": "apple",
      "price": 100
    },
    {
      "fruit": "apple",
      "price": 200
    },
    {
      "fruit": "apple",
      "price": 140
    }
  ],
  [
    {
      "fruit": "orange",
      "price": 120
    },
    {
      "fruit": "orange",
      "price": 130
    }
  ]
]

Comments

[oceans_0228]

早速のご回答ありがとうございます！
非常に助かりました。orz やっぱLodashって便利ですね。