配列の配列をJavaScriptでグループ化されたオブジェクトの配列に変換します

たとえば、このような色や果物に関するデータを含む2次元配列があるとします

const data = [
   ['orange', 'fruit'],
   ['red', 'color'],
   ['green', 'color'],
   ['orange', 'color'],
   ['banana', 'fruit'],
   ['blue', 'color'],
   ['lemon', 'fruit'],
   ['mango', 'fruit'],
   ['lemon', 'color'],
];

この配列を取り込んで、さまざまな果物や色がカテゴリごとにグループ化された配列を返す関数を作成する必要があります。

この例のように、「fruit」と「color」の2つのカテゴリしかないため、次のように出力に2つのオブジェクトの配列が含まれると予想されます-

[
   {
      group: 'fruit',
      value: [ 'orange', 'banana', 'lemon', 'mango' ]
   },
   {
      group: 'color',
      value: [ 'red', 'green', 'orange', 'blue', 'lemon' ]
   }
]

注 −この例では、カテゴリは2つしかありませんが、2つだけでなく、動的な数のカテゴリで機能するソリューションを作成する必要があります。

それでは、この問題の解決策を考えましょう。 Array.prototype.reduce（）メソッドを使用し、サブ配列ごとに、既存のグループがあるかどうかを確認します。グループが存在する場合は、新しい値をそのvalueプロパティにプッシュします。それ以外の場合は、そのグループの新しいオブジェクトを作成して、配列にプッシュします。

例

const data = [
   ['orange', 'fruit'],
   ['red', 'color'],
   ['green', 'color'],
   ['orange', 'color'],
   ['banana', 'fruit'],
   ['blue', 'color'],
   ['lemon', 'fruit'],
   ['mango', 'fruit'],
   ['lemon', 'color'],
];
const groupData = arr => {
   return arr.reduce((acc, val) => {
      const [value, groupName] = val;
      const groupIndex = acc.findIndex(el => el?.group === groupName);
      if(groupIndex !== -1){
         acc[groupIndex].value.push(value);
      }else{
         acc.push({
            group: groupName,
            value: [value]
         });
      }
      return acc;
   }, []);
};
console.log(groupData(data));

出力

コンソールの出力は-

[
   {
      group: 'fruit',
      value: [ 'orange', 'banana', 'lemon', 'mango' ]
   },
   {
      group: 'color',
      value: [ 'red', 'green', 'orange', 'blue', 'lemon' ]
   }
]