複数の連想配列を一つの連想配列に変換したいです

Question

前提

TypeScriptで連想配列を操作しようと考えています。
複数の連想配列(今回は２つ)を結合したいと考えております。

実現したいこと　

objHeaderとobjBodyをgroup()で結合して
resultに変換をしたいです。

objHeader: any[] = [
    { rank: '1位', point: 40, group: 1 },
    { rank: '2位', point: 20, group: 2 },
  ];

  objBody: any[] = [
    { rank: '1位', point: 40, group: 1 },
    { rank: '2位', point: 30, group: 1 },
    { rank: '3位', point: 20, group: 1 },
    { rank: '1位', point: 50, group: 2 },
    { rank: '2位', point: 20, group: 2 },
    { rank: '3位', point: 10, group: 2 },
  ];

result: any[] = [
    {
      rank: '1位',
      point: 40,
      group: 1,
      data: [
        { rank: '1位', point: 40, group: 1 },
        { rank: '2位', point: 30, group: 1 },
        { rank: '3位', point: 20, group: 1 },
      ],
    },
    {
      rank: '2位',
      point: 50,
      gr: 2,
      data: [
        { rank: '1位', point: 50, group: 2 },
        { rank: '2位', point: 20, group: 2 },
        { rank: '3位', point: 10, group: 2 },
      ],
    },

試したこと

map関数を使用して作ろうと考えましたが、上手くいきませんでした。。。

    this.objBody.map((value: any) => {
      this.objHeader.map((value2: any) => {
        if (value.group === value2.group) {
     　　value2.data = value
        }
      });
    });

Comments

[miyabi_pudding]

うまくいかなかったとは、具体的にどういった結果だったのでしょうか？
（想定のオブジェクトにならなかった、エラーが出たなど）

[sho.cat]

申し訳ありません。書き方が悪かったです。
上手くいかなかったというより、試したことにあるソース部分までは書いたのですが、
そこから先がどう操作してよいか分らなくなってしまいました。
作成中は下記のように書いたのですが、mapで回る度dataが上書きされるのでどうしてよいかわからなくなってしまいました。
```
this.objBody.map((value: any) => {
this.objHeader.map((value2: any) => {
if (value.gr === value2.gr) {
value2.data = value
}
});
});

```

[miyabi_pudding]

そのif文の中身まで書きましょう。
質問本文は修正できますので。
やりたいこと、何が違うのかわかりましたので、回答に移ります。

Answer 1

Array.prototype.groupBy() がもうすぐメジャーブラウザで使えるようになりそうなので、こちらを使うがいいかと思います。

ts詳しくないので、バニラですが、サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/2jtn5ae8/

    const groupBy = objBody.groupBy(({ group }) => group)
    const result = objHeader.map(x => {
      x.data = groupBy[x.group]
      return x
    })

polyfill :
https://github.com/zloirock/core-js
https://cdn.jsdelivr.net/npm/core-js-bundle@3.21.1/index.min.js

---

Array.prototype.groupBy() - JavaScript | MDN
Array grouping - Chrome Platform Status

Comments

[miyabi_pudding]

こんな便利なメソッド出てたとは・・・。
早く標準になってほしいですね。

[Lhankor_Mhy]

Chrome Platform Status によると、Webkit も Shippng となっていたので、数年の内には行けそうな気がしますね。

[sho.cat]

ご返信ありがとうございます。
groupBy関数は知りませんでした。
少しロジックが難しいですが、理解しようと思います。
ありがとうございました！

Answer 2

そのまま代入をしてしまうと、元のオブジェクトに代入、となってしまいますので、
それでは、質問者さんの想定の挙動にはならないでしょう。

まず、型を定義した方が、進めやすいかと思いますので、型を定義し処理をしていきましょう。

interface Data {
  rank: string;
  point: number;
  group: number;
}

interface DataWrapper extends Data {
  data: Data[];
}

次に、変数を、型を使った宣言に直します。

objHeader: Data[] = [
   // 省略
];

objBody: Data[] = [
  // 省略
];

では実処理です。
オブジェクトのプロパティに代入すると、上書きされてしまうので、
mapループ上で新たなオブジェクトを作り、mapから返すようにしましょう。

const result: DataWrapper[] = this.objHeader.map((value: Data) => {
  // 最終で統合したいのは、Headerが基準となるため、一次ループは、Header
  // 分割代入でコピる
  const obj: DataWrapper = {...value, data: []};
  this.objBody.forEach((value2: Data) => {
    // 二次ループは、Bodyの方で行う
    if (value.group === value2.group) {
      // 新しく作ったオブジェクトの方に追加する
      obj.data.push(value2);
    }
  });
  return obj;
});

もっと、短くできるかもしれませんが。

うまくいかなければコメントください。

Comments

[sho.cat]

ご返信ありがとうございます。
まずは説明不足だったことをお許しください。
上書きされてしまって困っていた所解決することができました。
ありがとうございます！