キーでオブジェクトの配列をグループ化する方法


153

誰かがオブジェクトキーによってオブジェクトの配列をグループ化し、そのグループ化に基づいてオブジェクトの新しい配列を作成する(可能であればロダッシュ)方法を知っていますか?たとえば、車のオブジェクトの配列があります。

var cars = [
    {
        'make': 'audi',
        'model': 'r8',
        'year': '2012'
    }, {
        'make': 'audi',
        'model': 'rs5',
        'year': '2013'
    }, {
        'make': 'ford',
        'model': 'mustang',
        'year': '2012'
    }, {
        'make': 'ford',
        'model': 'fusion',
        'year': '2015'
    }, {
        'make': 'kia',
        'model': 'optima',
        'year': '2012'
    },
];

次のようにグループ化された自動車オブジェクトの新しい配列を作成したいと思いますmake

var cars = {
    'audi': [
        {
            'model': 'r8',
            'year': '2012'
        }, {
            'model': 'rs5',
            'year': '2013'
        },
    ],

    'ford': [
        {
            'model': 'mustang',
            'year': '2012'
        }, {
            'model': 'fusion',
            'year': '2015'
        }
    ],

    'kia': [
        {
            'model': 'optima',
            'year': '2012'
        }
    ]
}

1
見ましたgroupByか?
SLaks

2
結果は無効です。
Nina Scholz、2016年

オブジェクトの代わりにマップを取得する同様のアプローチはありますか?
Andrea Bergonzo

回答:


104

ティモの答えは、私がそれをどのように行うかです。シンプル_.groupByで、グループ化された構造内のオブジェクトに重複を許可します。

ただし、OPは重複するmakeキーを削除することも要求しました。ずっと行きたいなら:

var grouped = _.mapValues(_.groupBy(cars, 'make'),
                          clist => clist.map(car => _.omit(car, 'make')));

console.log(grouped);

収量:

{ audi:
   [ { model: 'r8', year: '2012' },
     { model: 'rs5', year: '2013' } ],
  ford:
   [ { model: 'mustang', year: '2012' },
     { model: 'fusion', year: '2015' } ],
  kia: [ { model: 'optima', year: '2012' } ] }

Underscore.jsを使用してこれを行う場合は、そのバージョンが_.mapValuesと呼ばれることに注意してください_.mapObject


278

単純なJavascriptでは、 Array#reduce、オブジェクトをます

var cars = [{ make: 'audi', model: 'r8', year: '2012' }, { make: 'audi', model: 'rs5', year: '2013' }, { make: 'ford', model: 'mustang', year: '2012' }, { make: 'ford', model: 'fusion', year: '2015' }, { make: 'kia', model: 'optima', year: '2012' }],
    result = cars.reduce(function (r, a) {
        r[a.make] = r[a.make] || [];
        r[a.make].push(a);
        return r;
    }, Object.create(null));

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }


1
result結果を反復するにはどうすればよいですか?
Mounir Elfassi

1
エントリを取得しObject.entriesて、キーと値のペアをループできます。
Nina Scholz、

makeグループ化されたデータセットからを削除する方法はありますか?余分なスペースが必要です。
Mercurial

はい、Rest in Object Destructuringによって。
Nina Scholz、

rとは何の略ですか?rがアキュムレータであり、currentValueであると仮定することは正しいでしょうか?
Omar

68

あなたが探してい_.groupBy()ます。

必要に応じて、グループ化するプロパティをオブジェクトから削除することは簡単です。

var cars = [{'make':'audi','model':'r8','year':'2012'},{'make':'audi','model':'rs5','year':'2013'},{'make':'ford','model':'mustang','year':'2012'},{'make':'ford','model':'fusion','year':'2015'},{'make':'kia','model':'optima','year':'2012'},];

var grouped = _.groupBy(cars, function(car) {
  return car.make;
});

console.log(grouped);
<script src='https://cdn.jsdelivr.net/lodash/4.17.2/lodash.min.js'></script>


おまけとして、ES6の矢印関数を使用するとさらに優れた構文が得られます。

const grouped = _.groupBy(cars, car => car.make);

18
さらに短くしたいvar grouped = _.groupBy(cars, 'make');場合は、アクセサが単純なプロパティ名であれば、関数はまったく必要ありません。
Jonathan Eunice

1
「_」は何を表していますか?
Adrian Grzywaczewski 2017

@AdrianGrzywaczewski名前空間「lodash」または「underscore」のデフォルトの規則でした。ライブラリがモジュール化されたため、不要になりました。npmjs.com/package/lodash.groupby
vilsbole

5
そして、どうすれば結果に介入できますか?
ルイスアントニオペスターナ2018

36

es6の特定のキーでオブジェクトの配列をグループ化する短いバージョン:

result = array.reduce((h, obj) => Object.assign(h, { [obj.key]:( h[obj.key] || [] ).concat(obj) }), {})

長いバージョン:

result = array.reduce(function(h, obj) {
  h[obj.key] = (h[obj.key] || []).concat(obj);
  return h; 
}, {})

元の質問は、車をメーカー別にグループ化する方法を尋ねているようですが、各グループでメーカーを省略しています。したがって、答えは次のようになります。

result = cars.reduce((h, {model,year,make}) => {
  return Object.assign(h, { [make]:( h[make] || [] ).concat({model,year})})
}, {})

これは明らかにes5ではありません
死神

そのだけで動作します!。誰もがこの還元機能を詳しく説明できますか?
Jeevan 2018

私はあなたの両方の答えが好きでしたが、どちらも「make」フィールドを各「make」配列のメンバーとして提供しているようです。配信された出力が期待される出力と一致する場合、私はあなたに基づいて回答を提供しました。ありがとう!
Daniel Vukasovich

15

groupByこれは、次のコードを一般化した独自の関数です。https//github.com/you-dont-need/You-Dont-Need-Lodash-Underscore

function groupBy(xs, f) {
  return xs.reduce((r, v, i, a, k = f(v)) => ((r[k] || (r[k] = [])).push(v), r), {});
}

const cars = [{ make: 'audi', model: 'r8', year: '2012' }, { make: 'audi', model: 'rs5', year: '2013' }, { make: 'ford', model: 'mustang', year: '2012' }, { make: 'ford', model: 'fusion', year: '2015' }, { make: 'kia', model: 'optima', year: '2012' }];

const result = groupBy(cars, (c) => c.make);
console.log(result);


15

var cars = [{
  make: 'audi',
  model: 'r8',
  year: '2012'
}, {
  make: 'audi',
  model: 'rs5',
  year: '2013'
}, {
  make: 'ford',
  model: 'mustang',
  year: '2012'
}, {
  make: 'ford',
  model: 'fusion',
  year: '2015'
}, {
  make: 'kia',
  model: 'optima',
  year: '2012'
}].reduce((r, car) => {

  const {
    model,
    year,
    make
  } = car;

  r[make] = [...r[make] || [], {
    model,
    year
  }];

  return r;
}, {});

console.log(cars);


8

私はここでREAL GROUP BYこのタスクとまったく同じJS配列の例に行きます

const inputArray = [ 
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 1", Value: "5" },
    { Phase: "Phase 1", Step: "Step 1", Task: "Task 2", Value: "10" },
    { Phase: "Phase 1", Step: "Step 2", Task: "Task 1", Value: "15" },
    { Phase: "Phase 1", Step: "Step 2", Task: "Task 2", Value: "20" },
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 1", Value: "25" },
    { Phase: "Phase 2", Step: "Step 1", Task: "Task 2", Value: "30" },
    { Phase: "Phase 2", Step: "Step 2", Task: "Task 1", Value: "35" },
    { Phase: "Phase 2", Step: "Step 2", Task: "Task 2", Value: "40" }
];

var outObject = inputArray.reduce(function(a, e) {
  // GROUP BY estimated key (estKey), well, may be a just plain key
  // a -- Accumulator result object
  // e -- sequentally checked Element, the Element that is tested just at this itaration

  // new grouping name may be calculated, but must be based on real value of real field
  let estKey = (e['Phase']); 

  (a[estKey] ? a[estKey] : (a[estKey] = null || [])).push(e);
  return a;
}, {});

console.log(outObject);


7

_.groupBy funcによって反復ごとに呼び出される関数内のオブジェクトを変更しようとすることができます。ソース配列が要素を変更することに注意してください!

var res = _.groupBy(cars,(car)=>{
    const makeValue=car.make;
    delete car.make;
    return makeValue;
})
console.log(res);
console.log(cars);

1
このコードは問題を解決する可能性がありますが、これが問題を解決する方法と理由の説明含めると、投稿の品質を向上させるのに役立ちます。あなたが今尋ねている人だけでなく、あなたが将来の読者のための質問に答えていることを忘れないでください!回答を編集して説明を追加し、適用される制限と前提を示してください。
マキエン

目的の結果を得るために配列を1度だけ調べるので、それは私にとって最良の答えのように見えます。makeプロパティを削除するために別の関数を使用する必要はなく、より読みやすくなっています。
Carrm

7

単純なforループでも可能です:

 const result = {};

 for(const {make, model, year} of cars) {
   if(!result[make]) result[make] = [];
   result[make].push({ model, year });
 }

そしておそらくより速く、そしてより簡単です。入力したくないdbテーブルのフィールドの長いリストがあったので、スニペットをもう少しダイナミックに拡張しました。また、constをletに置き換える必要があることに注意してください。 for ( let { TABLE_NAME, ...fields } of source) { result[TABLE_NAME] = result[TABLE_NAME] || []; result[TABLE_NAME].push({ ...fields }); }
エイドリアン

TIL、ありがとう!medium.com/@mautayro/...
エイドリアン

5

キーがnullになる可能性があり、それらを他のグループとしてグループ化する場合

var cars = [{'make':'audi','model':'r8','year':'2012'},{'make':'audi','model':'rs5','year':'2013'},{'make':'ford','model':'mustang','year':'2012'},{'make':'ford','model':'fusion','year':'2015'},{'make':'kia','model':'optima','year':'2012'},
            {'make':'kia','model':'optima','year':'2033'},
            {'make':null,'model':'zen','year':'2012'},
            {'make':null,'model':'blue','year':'2017'},

           ];


 result = cars.reduce(function (r, a) {
        key = a.make || 'others';
        r[key] = r[key] || [];
        r[key].push(a);
        return r;
    }, Object.create(null));

4

再利用できるメソッドを作成する

Array.prototype.groupBy = function(prop) {
      return this.reduce(function(groups, item) {
        const val = item[prop]
        groups[val] = groups[val] || []
        groups[val].push(item)
        return groups
      }, {})
    };

次に、任意の基準でグループ化できます

const groupByMake = cars.groupBy('make');
        console.log(groupByMake);

var cars = [
    {
        'make': 'audi',
        'model': 'r8',
        'year': '2012'
    }, {
        'make': 'audi',
        'model': 'rs5',
        'year': '2013'
    }, {
        'make': 'ford',
        'model': 'mustang',
        'year': '2012'
    }, {
        'make': 'ford',
        'model': 'fusion',
        'year': '2015'
    }, {
        'make': 'kia',
        'model': 'optima',
        'year': '2012'
    },
];
  //re-usable method
Array.prototype.groupBy = function(prop) {
	  return this.reduce(function(groups, item) {
		const val = item[prop]
		groups[val] = groups[val] || []
		groups[val].push(item)
		return groups
	  }, {})
	};
  
 // initiate your groupBy. Notice the recordset Cars and the field Make....
  const groupByMake = cars.groupBy('make');
		console.log(groupByMake);
    
    //At this point we have objects. You can use Object.keys to return an array


3

ES6を使用したプロトタイプバージョン。基本的に、これはreduce関数を使用してアキュムレータと現在のアイテムを渡し、次にこれを使用して、渡されたキーに基づいて「グループ化された」配列を構築します。reduceの内部は複雑に見えるかもしれませんが、基本的には、渡されたオブジェクトのキーが存在するかどうかを確認し、空の配列を作成しない場合は、新しく作成された配列に現在の項目を追加します。演算子は、現在のキー配列のすべてのオブジェクトを渡し、現在のアイテムを追加します。これが誰かを助けることを願っています!

Array.prototype.groupBy = function(k) {
  return this.reduce((acc, item) => ((acc[item[k]] = [...(acc[item[k]] || []), item]), acc),{});
};

const projs = [
  {
    project: "A",
    timeTake: 2,
    desc: "this is a description"
  },
  {
    project: "B",
    timeTake: 4,
    desc: "this is a description"
  },
  {
    project: "A",
    timeTake: 12,
    desc: "this is a description"
  },
  {
    project: "B",
    timeTake: 45,
    desc: "this is a description"
  }
];

console.log(projs.groupBy("project"));

1

次のarray#forEach()ようなメソッドを使用することもできます。

const cars = [{ make: 'audi', model: 'r8', year: '2012' }, { make: 'audi', model: 'rs5', year: '2013' }, { make: 'ford', model: 'mustang', year: '2012' }, { make: 'ford', model: 'fusion', year: '2015' }, { make: 'kia', model: 'optima', year: '2012' }];

let newcars = {}

cars.forEach(car => {
  newcars[car.make] ? // check if that array exists or not in newcars object
    newcars[car.make].push({model: car.model, year: car.year})  // just push
   : (newcars[car.make] = [], newcars[car.make].push({model: car.model, year: car.year})) // create a new array and push
})

console.log(newcars);


1
function groupBy(data, property) {
  return data.reduce((acc, obj) => {
    const key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}
groupBy(people, 'age');

1

これを試してみてください、私にとってはうまくいきます。

let grouped = _.groupBy(cars, 'make');


2
キャッチされていないReferenceError:_は定義されていません-これを解決するためだけに、サードパーティのライブラリをインストールする必要があることは明らかです。
metakungfu

1
すみません、誰もが知っていると思います。_はスタンドし、主にlodash libに使用されます。したがって、lodashを使用する必要があります。あなたが彼/彼女がlodashを求めていることを知るように質問を読んでください。有難う御座います。覚えておきます。libを書くことを忘れないでください。
agravat.in

1

外部ライブラリを使用しない各ソリューションのパフォーマンスをテストするためのベンチマークを作成しました。

JSBen.ch

reduce()@Ninaショルツによって掲示オプションは、最適なもののようです。


0

@metakunfuの回答は気に入りましたが、期待どおりの出力が得られません。これが、最終的なJSONペイロードの「make」を取り除く更新されたものです。

var cars = [
    {
        'make': 'audi',
        'model': 'r8',
        'year': '2012'
    }, {
        'make': 'audi',
        'model': 'rs5',
        'year': '2013'
    }, {
        'make': 'ford',
        'model': 'mustang',
        'year': '2012'
    }, {
        'make': 'ford',
        'model': 'fusion',
        'year': '2015'
    }, {
        'make': 'kia',
        'model': 'optima',
        'year': '2012'
    },
];

result = cars.reduce((h, car) => Object.assign(h, { [car.make]:( h[car.make] || [] ).concat({model: car.model, year: car.year}) }), {})

console.log(JSON.stringify(result));

出力:

{  
   "audi":[  
      {  
         "model":"r8",
         "year":"2012"
      },
      {  
         "model":"rs5",
         "year":"2013"
      }
   ],
   "ford":[  
      {  
         "model":"mustang",
         "year":"2012"
      },
      {  
         "model":"fusion",
         "year":"2015"
      }
   ],
   "kia":[  
      {  
         "model":"optima",
         "year":"2012"
      }
   ]
}

0

lodash / fpを使用すると_.flow()、最初のグループをキーにして関数を作成し、各グループをマップして、各アイテムからキーを省略できます。

const { flow, groupBy, mapValues, map, omit } = _;

const groupAndOmitBy = key => flow(
  groupBy(key),
  mapValues(map(omit(key)))
);

const cars = [{ make: 'audi', model: 'r8', year: '2012' }, { make: 'audi', model: 'rs5', year: '2013' }, { make: 'ford', model: 'mustang', year: '2012' }, { make: 'ford', model: 'fusion', year: '2015' }, { make: 'kia', model: 'optima', year: '2012' }];

const groupAndOmitMake = groupAndOmitBy('make');

const result = groupAndOmitMake(cars);

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>


0

すべてのフィールドに入力したくない場合は、@ Jonas_Wilmsによる回答に基づいて構築します。

    var result = {};

    for ( let { first_field, ...fields } of your_data ) 
    { 
       result[first_field] = result[first_field] || [];
       result[first_field].push({ ...fields }); 
    }

ベンチマークは作成しませんでしたが、forループを使用した方が、この回答で提案されているものよりも効率的だと思います。


0
const reGroup = (list, key) => {
    const newGroup = {};
    list.forEach(item => {
        const newItem = Object.assign({}, item);
        delete newItem[key];
        newGroup[item[key]] = newGroup[item[key]] || [];
        newGroup[item[key]].push(newItem);
    });
    return newGroup;
};
const animals = [
  {
    type: 'dog',
    breed: 'puddle'
  },
  {
    type: 'dog',
    breed: 'labradoodle'
  },
  {
    type: 'cat',
    breed: 'siamese'
  },
  {
    type: 'dog',
    breed: 'french bulldog'
  },
  {
    type: 'cat',
    breed: 'mud'
  }
];
console.log(reGroup(animals, 'type'));
const cars = [
  {
      'make': 'audi',
      'model': 'r8',
      'year': '2012'
  }, {
      'make': 'audi',
      'model': 'rs5',
      'year': '2013'
  }, {
      'make': 'ford',
      'model': 'mustang',
      'year': '2012'
  }, {
      'make': 'ford',
      'model': 'fusion',
      'year': '2015'
  }, {
      'make': 'kia',
      'model': 'optima',
      'year': '2012'
  },
];

console.log(reGroup(cars, 'make'));

0

タイプスクリプト内のオブジェクトのグループ化された配列:

groupBy (list: any[], key: string): Map<string, Array<any>> {
    let map = new Map();
    list.map(val=> {
        if(!map.has(val[key])){
            map.set(val[key],list.filter(data => data[key] == val[key]));
        }
    });
    return map;
});

各キーの検索を行うと、これは非効率的に見えます。検索はO(n)の複雑さを持っている可能性が最も高いです。
ロイキップ

0

依存関係や複雑さのない純粋な単純なjsでそれを書くのが大好きです。

const mp = {}
const cars = [
  {
    model: 'Imaginary space craft SpaceX model',
    year: '2025'
  },
  {
    make: 'audi',
    model: 'r8',
    year: '2012'
  },
  {
    make: 'audi',
    model: 'rs5',
    year: '2013'
  },
  {
    make: 'ford',
    model: 'mustang',
    year: '2012'
  },
  {
    make: 'ford',
    model: 'fusion',
    year: '2015'
  },
  {
    make: 'kia',
    model: 'optima',
    year: '2012'
  }
]

cars.forEach(c => {
  if (!c.make) return // exit (maybe add them to a "no_make" category)

  if (!mp[c.make]) mp[c.make] = [{ model: c.model, year: c.year }]
  else mp[c.make].push({ model: c.model, year: c.year })
})

console.log(mp)


-1

ここに別の解決策があります。要求通り。

makeでグループ化された車のオブジェクトの新しい配列を作成します。

function groupBy() {
  const key = 'make';
  return cars.reduce((acc, x) => ({
    ...acc,
    [x[key]]: (!acc[x[key]]) ? [{
      model: x.model,
      year: x.year
    }] : [...acc[x[key]], {
      model: x.model,
      year: x.year
    }]
  }), {})
}

出力:

console.log('Grouped by make key:',groupBy())

-1

JavaのCollectors.groupingBy()から着想を得たソリューションは次のとおりです。

function groupingBy(list, keyMapper) {
  return list.reduce((accummalatorMap, currentValue) => {
    const key = keyMapper(currentValue);
    if(!accummalatorMap.has(key)) {
      accummalatorMap.set(key, [currentValue]);
    } else {
      accummalatorMap.set(key, accummalatorMap.get(key).push(currentValue));
    }
    return accummalatorMap;
  }, new Map());
}

これはMapオブジェクトを提供します。

// Usage

const carMakers = groupingBy(cars, car => car.make);

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.