タイトルを次のように書き換えます。メイン配列をグループ化し、各グループにフィールドとサブ配列を追加します。

Question

次のような重い配列があります:

[
  {Id: 1、名前: '赤'、オプション名: '色'}、
  {Id: 2、名前: '黄'、オプション名: '色'}、
  {Id: 3、名前: '青'、オプション名: '色'}、
  {Id: 4、名前: 'Green'、オプション名: 'Color'}、
  {Id: 7、名前: 'ブラック'、オプション名: 'カラー'}、
  {Id: 8、名前: 'S'、オプション名: 'サイズ'}、
  {Id: 11、名前: 'M'、オプション名: 'サイズ'}、
  {Id: 12、名前: 'L'、オプション名: 'サイズ'}、
  {Id: 13、名前: 'XL'、オプション名: 'サイズ'}、
  {Id: 14、名前: 'XXL'、オプション名: 'サイズ'}
]

次のように、optionName でグループ化し、メイン配列に 2 つの行を含める必要があります。

[
  {
    名前：「カラー」、
    データ:[{Id: 1, 名前: 'レッド'},
          {ID: 2、名前: 'イエロー'}、
          {ID: 3、名前: 'ブルー'}、
          {ID: 4、名前: 'グリーン'}、
          {ID: 7、名前: 'ブラック'}]
  }、{
    名前: 'サイズ'、
    データ:[{Id: 8, 名前: 'S'},
          {ID: 11、名前: 'M'}、
          {ID: 12、名前: 'L'}、
          {ID: 13、名前: 'XL'}、
          {ID: 14、名前: 'XXL'}]
  }
]

JavaScriptで実装するにはどうすればよいですか?

Answer 1

An ES6 solution using Map object:

function groupBy(arr, key) {
  	return arr.reduce(
      (sum, item) => {
      	const groupByVal = item[key];
        groupedItems = sum.get(groupByVal) || [];
        groupedItems.push(item);
      	return sum.set(groupByVal, groupedItems);
        },
      new Map()
      );
}

var Data = [ 
{ Id: 1, Name: 'Red', optionName: 'Color' }, 
  { Id: 2, Name: 'Yellow', optionName: 'Color' },
  { Id: 3, Name: 'Blue', optionName: 'Color' },
  { Id: 4, Name: 'Green', optionName: 'Color' },
  { Id: 7, Name: 'Black', optionName: 'Color' },
  { Id: 8, Name: 'S', optionName: 'Size' },
  { Id: 11, Name: 'M', optionName: 'Size' },
  { Id: 12, Name: 'L', optionName: 'Size' },
  { Id: 13, Name: 'XL', optionName: 'Size' },
  { Id: 14, Name: 'XXL', optionName: 'Size' } ];

document.getElementById("showArray").innerHTML =JSON.stringify([...groupBy(Data, 'optionName')], null, 4); 

<pre id="showArray"></pre>

Answer 2

これは、この状況のた​​めに私が書いたコードスニペットです。この関数はすべての配列に追加できます:

リーリー

こんな感じで使えます。データをグループ化する方法を定義する関数を渡すだけです。

リーリー

ワーキングフィドル

必要に応じて、{key: k, data: map[k]} を {Name: k, Data: map[k]} に置き換えることができます。

---

これは、上記のコードのよりコンパクトな ES6 バージョンでもあります:

リーリー

次のように使用します:

リーリー