web-dev-qa-db-ja.com

オブジェクトの配列をプロパティに基づいて個別の配列に分割します

次のような配列があるとします。

var arr = [
    {type:"orange", title:"First"},
    {type:"orange", title:"Second"},
    {type:"banana", title:"Third"},
    {type:"banana", title:"Fourth"}
];

そして、私はこれを同じタイプのオブジェクトを持つ配列に分割したいので：

[{type:"orange", title:"First"},
{type:"orange", title:"Second"}]

[{type:"banana", title:"Third"},
{type:"banana", title:"Fourth"}]

しかし、私はこれを一般的に行いたいので、オレンジまたはバナナを指定するif文がありません

// not like this
for (prop in arr){
    if (arr[prop] === "banana"){
       //add to new array
    }
}

考え？ JQueryとUnderscoreはどちらも使用するオプションです。

javascriptjqueryarraysobjectunderscore.js
40
Evan

JQueryとUnderscoreはどちらも使用するオプションです。

nderscoreのgroupBy は、まさに必要なことを行います。

_.groupBy(arr, "type")
37
Bergi

これは Array.reduce(...) の簡単な仕事です：

function groupBy(arr, property) {
  return arr.reduce(function(memo, x) {
    if (!memo[x[property]]) { memo[x[property]] = []; }
    memo[x[property]].Push(x);
    return memo;
  }, {});
}

var o = groupBy(arr, 'type'); // => {orange:[...], banana:[...]}
o.orange; // => [{"type":"orange","title":"First"},{"type":"orange","title":"Second"}]
o.banana; // => [{"type":"banana","title":"Third"},{"type":"banana","title":"Fourth"}]

もちろん、ターゲットブラウザがECMAScript 262 5th editionをサポートしていない場合は、自分で「削減」を実装するか、ポリフィルライブラリを使用するか、別の答えを選択する必要があります。

[更新]JavaScriptのどのバージョンでも動作するソリューションを次に示します。

function groupBy2(xs, prop) {
  var grouped = {};
  for (var i=0; i<xs.length; i++) {
    var p = xs[i][prop];
    if (!grouped[p]) { grouped[p] = []; }
    grouped[p].Push(xs[i]);
  }
  return grouped;
}
35
maerics

これはオブジェクトの配列を想定しています：

function groupBy(array, property) {
    var hash = {};
    for (var i = 0; i < array.length; i++) {
        if (!hash[array[i][property]]) hash[array[i][property]] = [];
        hash[array[i][property]].Push(array[i]);
    }
    return hash;
}

groupBy(arr,'type')  // Object {orange: Array[2], banana: Array[2]}
groupBy(arr,'title') // Object {First: Array[1], Second: Array[1], Third: Array[1], Fourth: Array[1]}
11
Shmiddty

タイトルに基づいてオブジェクトを保持する辞書を作成するだけです。次のようにできます：

js

var arr = [
{type:"orange", title:"First"},
 {type:"orange", title:"Second"},
 {type:"banana", title:"Third"},
 {type:"banana", title:"Fourth"}
];
var sorted = {};
for( var i = 0, max = arr.length; i < max ; i++ ){
 if( sorted[arr[i].type] == undefined ){
  sorted[arr[i].type] = [];
 }
 sorted[arr[i].type].Push(arr[i]);
}
console.log(sorted["orange"]);
console.log(sorted["banana"]);

jsfiddleデモ： http://jsfiddle.net/YJnM6/

9
Travis J

TypeScriptバージョン。

/**
* Group object array by property
 * Example, groupBy(array, ( x: Props ) => x.id );
 * @param array
 * @param property
 */
export const groupBy = <T>(array: Array<T>, property: (x: T) => string): { [key: string]: Array<T> } =>
  array.reduce((memo: { [key: string]: Array<T> }, x: T) => {
    if (!memo[property(x)]) {
      memo[property(x)] = [];
    }
    memo[property(x)].Push(x);
    return memo;
  }, {});

export default groupBy;
2
denolsson