オブジェクトの配列を、キーの値が同じオブジェクトでオブジェクトの配列の配列としてまとめたい

Question

前提・実現したいこと

オブジェクトの配列を、キーの値が同じオブジェクトの配列の配列としてまとめるにはどうしたら良いか悩んでいます。

具体的には、コード内にあるarray_1の配列から、array_3の様な構造の配列を新規に作成したいです。

キーnameの値が同じオブジェクトをまとめて配列を作成するまではできたのですが、(array_1からarray_2の状態)
キーidの値が同じものでさらにまとめたい場合(array_2からarray_3の状態)の処理で良い方法が思いつきません。

array_1の配列から、array_3の様な構造にする為に処理を2回に分けているのですが、
他にも良いやり方があればご教示願いたいです。

var array_1 = [
    { id: 0, name: "a"},
    { id: 2, name: "b"},
    { id: 3, name: "b"},
    { id: 3, name: "b"}
]
var array_2 =  [
  [
    { id: 0, name: "a"}
  ],
  [
    { id: 2, name: "b"},
    { id: 3, name: "b"},
    { id: 3, name: "b"}
  ]
]
var array_3 = [
  [
    { id: 0, name: "a"}
  ],
  [
    { id: 2, name: "b"}
  ],
  [
    { id: 3, name: "b"},
    { id: 3, name: "b"}
  ]
]

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[nabanaba]

ありがとうございます。自分でもなんとか解決できましたので、回答としました。

Answer 1

こんにちは。

array_2 を経由せずに、array_1 から直接array_3を得る方法として、
以下を考えました。

var array_3 = array_1.reduce(function(a, e) {
    a.some(x => x[0].id == e.id && x[0].name == e.name && x.push(e)) || a.push([e]);    
    return a;
}, []);

以下にて、動作確認しています。

https://jsfiddle.net/jun68ykt/Lfy3odqu/42/

参考になれば幸いです。

---

補足

上記のコード中、以下の行

a.some(x => x[0].id == e.id && x[0].name == e.name && x.push(e)) || a.push([e]);

について、以下の２点を補足します。

(1) x.push(e) は、eが追加された後のxの長さを返すので、x.push(e) の返す値は常に1以上の整数であり、1以上の整数を論理値として評価すると trueになります。これを some メソッドから true を返させるために使っています。

(2) x[0] とe との比較で、プロパティ id、nameともに等しいかを検証する前に、念のため先頭に x が空の配列ではない検証を追加して、

x.length > 0 && x[0].id == e.id && ･･･

としなくてもよい 理由は、a に要素が追加されるのは、

a.push([e])

のときしかないので、a の要素である配列 x は空ではなく、
少なくとも１個の要素を持つことが分かっているからです。

Comments

[nabanaba]

自分にはちょっと難しくて、someメソッド内の処理を理解するのに時間がかかってしまいました。
reduceメソッドも使える様に勉強したいです。

[jun68ykt]

reduce は慣れると色々な場面で使えて便利です。

参考までに、以下

https://jsfiddle.net/jun68ykt/52dmp7x3/7/

は miyabi-sunさんのご回答に出てくる tmp を作るために reduce を使ってみた回答です。

[nabanaba]

ありがとうございます。
MDN で調べたら他にも色々できそうなのでちゃんと読んでおこうと思います。

Answer 2

2次元配列にした時点でかなり触りづらいですね。
なので質問文のケースではarray_1から2を経由するのではなく、
直接array_3に加工した方が早いです。

Object.values()を使えば一発解決するんじゃないですかね？

var array_1 = [
    { id: 0, name: "a"},
    { id: 2, name: "b"},
    { id: 3, name: "b"},
    { id: 3, name: "b"}
]
var tmp = {}; // 空のオブジェクトを宣言しておく
for (var it of array_1) {
  var key = `${it.id}-${it.name}`;
  if (tmp[key]) {
    tmp[key].push(it);
  } else {
    tmp[key] = [it];
  }
}

console.log(tmp);
console.log(Object.values(tmp));
// この中身は実際に動作して確認してみてね

Comments

[nabanaba]

Object.values()を使うのを思いつかなかったです。
わかりやすさを優先してベストアンサーとさせていただきました。

Answer 3

すでに回答いただいておりますが、
自分でもなんとか下記の様に解決することができました。
比べるとすごい冗長、、、

var array_1 = [
    { id: 0, name: "a"},
    { id: 2, name: "b"},
    { id: 3, name: "b"},
    { id: 3, name: "b"}
]
console.log("array_1", array_1);

var key = "name"
var array_2 = [];

array_2 = getMargeArr(array_1, "name");
console.log("array_2", array_2);

var array_3 = [];

for (var i in array_2) {
    var subArr = [];
    subArr = getMargeArr(array_2[i], "id");
    Array.prototype.push.apply(array_3, subArr);
}
console.log(array_3);


function getMargeArr(arr, key){
    var newArr = [];
    for (var i in arr) {
        if(typeof arr[i][key] !== undefined){
            var target_val = arr[i][key]; 
            var searchArr = searchArray(newArr, target_val, key)

            if (searchArr === undefined) {
                searchArr = []
                newArr.push(searchArr)
            }
            searchArr.push(arr[i])
        }
    }
    return newArr
}

function searchArray(list, target_val, key) {
    if(list.length !== 0){
        for (var i in list) {
            if (list[i][0][key] === target_val) {
                return list[i]
            }
        }
    }
    return undefined
}

Answer 4

問題点

var array_3 = [
  [
    { id: 0, name: "a"}
  ],
  [
    { id: 2, name: "b"}
  ],
  [
    { id: 3, name: "b"},
    { id: 3, name: "b"}
  ]
]

期待する配列に問題があるように感じます。

(問題1) 特定の id を持つオブジェクト群を探す為に全要素を検索しなければならない
(問題2) id の若い順番でソートすることまで期待しているのか不明

(問題1) については要求仕様の問題でせっかくid別に分類したのに、特定idを探し出す為に余計なコストがかかってしまいます。
(問題2) については既存の全回答で No ですが、array_1 が若番順でソートされているので、質問者がその問題に気が付いてない懸念があります。

new Map (定義順)

(問題1) は new Map で解決できます。
ただし、Map は定義順で iterable なオブジェクトを生成するので、愚直に set すると id の若番順で並びません。

'use strict';
function toMap (array) {
  return array.reduce(function (map, current) {
    var id = current.id;

    delete current.id;
    map.has(id) ? map.get(id).push(current) : map.set(id, [current]);

    return map;
  }, new Map);
}

var array_1 = [{id: 0, name: "a"}, {id: 2, name: "b"}, { id: 3, name: "b"}, {id: 3, name: "b"}],
    array_2 = [{id: 3, name: "b"}, {id: 3, name: "b"}, {id: 2, name: "b"}, {id: 0, name: "b"}];


console.log(JSON.stringify([...toMap(array_1)]));  // [[0,[{"name":"a"}]],[2,[{"name":"b"}]],[3,[{"name":"b"},{"name":"b"}]]]
console.log(JSON.stringify([...toMap(array_2)]));  // [[3,[{"name":"b"},{"name":"b"}]],[2,[{"name":"b"}]],[0,[{"name":"b"}]]]

配列 (若番順)

(問題2) への対策として、配列で解決する方法があります。
配列は定義順ではなく、若番順で列挙する事が期待できます。

ただし、id が配列のプロパティ名に依存するので、id を String 型に変換してしまいます。
id の型を維持するのであれば、new Map が妥当です。

'use strict';
function toArray (array) {
  return array.reduce(function (array, current) {
    var id = current.id;

    delete current.id;
    id in array ? array[id].push(current) : array[id] = [current];

    return array;
  }, []);
}

var array_1 = [{id: 0, name: "a"}, {id: 2, name: "b"}, { id: 3, name: "b"}, {id: 3, name: "b"}],
    array_2 = [{id: 3, name: "b"}, {id: 3, name: "b"}, {id: 2, name: "b"}, {id: 0, name: "b"}];

console.log(toArray(array_1));  // [[{"name":"a"}],,[{"name":"b"}],[{"name":"b"},{"name":"b"}]]
console.log(toArray(array_2));  // [[{"name":"a"}],,[{"name":"b"}],[{"name":"b"},{"name":"b"}]]

new Map (若番順)

new Map を呼び出す前にソートすれば、id の若番順で並びます。

function toMap (array) {
  return new Map(array.reduce(function (array, current) {
    const id = current.id;

    delete current.id;

    for (let element of array) {
      if (element[0] === id) {
        element[1].push(current);
        return array;
      }
    }

    array.push([id, [current]]);
    return array;
  }, []).sort(function (a, b) {
    return a > b;
  }));
}

var array_1 = [{id: 0, name: "a"}, {id: 2, name: "b"}, { id: 3, name: "b"}, {id: 3, name: "b"}],
    array_2 = [{id: 3, name: "b"}, {id: 3, name: "b"}, {id: 2, name: "b"}, {id: 0, name: "b"}];

console.log(JSON.stringify([...toMap(array_1)]));  // [[0,[{"name":"a"}],[2,[{"name":"b"}]],[3,[{"name":"b"},{"name":"b"}]]]
console.log(JSON.stringify([...toMap(array_2)]));  // [[0,[{"name":"a"}]],[2,[{"name":"b"}]],[3,[{"name":"b"},{"name":"b"}]]]

Re: nabanaba さん

Comments

[nabanaba]

回答ありがとうございます。
問題2については、事前に別のキーでソートしていたので問題ないかと思っていましたが、考えてみると必要ですね、、、
一度ソートしてから処理したいと思います。
id: 0　がなくなるのは後の処理で使うので困るのと、下記のパターンもあるので、キーと値のセットで持ちたいと思っていました。

```javascript

var array_3 = [
[
{ id: 0, name: "a"}
],
[
{ id: 2, name: "b"}
],
[
{ id: 3, name: "b"},
{ id: 3, name: "b"}
],
[
{ id: 3 , name: "c"},
{ id: 3, name: "c"}
]
]

```