多次元連想配列?JSON形式を編集して新たな配列にしたい その２

Question

前提・実現したいこと

前回の投稿です。参考までに。
多次元連想配列?JSON形式を編集して新たな配列にしたい

現在Reactの勉強をしています。

多次元連想配列？JSON形式?をtypeがAの場合の配列のみ残した配列に編集したいのですがどうすればいいでしょうか？

具体的には以下です。
以下の配列をtypeがAだけの配列に編集したいです。
前回と違うのが、もしcustomキーにtype==='A'がなければその連想配列ごと削除したいです

// APIからのレスポンスJSON
[
    {
        "id": 1,
        "name": "甲グループ",
        "custom": [
            {
                "id": 1,
                "name": "甲-1",
                "type": "B"
            }
        ]
    },
    {
        "id": 2,
        "name": "乙グループ",
        "custom": [
            {
                "id": 2,
                "name": "乙-1",
                "type": "A"
            },
            {
                "id": 3,
                "name": "乙-2",
                "type": "B"
            }
        ]
    }
]

↓　こうしたい

// 期待値。typeがAだけの配列
[
    {
        "id": 2,
        "name": "乙グループ",
        "custom": [
            {
                "id": 2,
                "name": "乙-1",
                "type": "A"
            }
        ]
    }
]

前回の投稿でcustomの中身を削除する方法はアドバイス頂き実現できました。
次はさらにそのcustomを持っている配列も削除したいです

アドバイスいただけないでしょうか？

###試したこと
以下のように実装しています。

let a =
  // APIからのレスポンスJSON
  [
    {
      id: 1,
      name: "甲グループ",
      custom: [
        {
          id: 1,
          name: "甲-1",
          type: "B"
        }
      ]
    },
    {
      id: 2,
      name: "乙グループ",
      custom: [
        {
          id: 2,
          name: "乙-1",
          type: "A"
        },
        {
          id: 3,
          name: "乙-2",
          type: "B"
        }
      ]
    }
  ];

a.forEach((v) => {
  v.custom = v.custom.filter(c => {
    return c.type === "A";
  })
  if(!v.custom.length){
    //TODO vを配列から消したい
  }
});

console.log(a);

https://codepen.io/k49977/pen/eYvrQqL

filterの後でvを削除しようと思ったりしていますが、具体的なコードがイメージできていません。。

Answer 1

あんまり美しくないですが...

const target = "A";
const result = a
  .filter(item => item.custom.some(x => x.type == target))
  .map(item => {
    item.custom = item.custom.filter(x => x.type == target);
    return item;
  });

type が A のオブジェクトだけに絞り込んだ後、custom を type が "A" のデータのみに置き換えています。

Comments

[draq]

このコード元データ自体を変更しているので、それがいやなら最初にディープコピー作るなりしてください。

[k49977]

ありがとうございます！someの使い方など調べてみます！

[k49977]

someは配列の中身が条件に一つでも合致すれば合格のようですね。
なので
>.filter(item => item.custom.some(x => x.type == target))
のところで「typeがAの配列が一つも含まれていないものを削除する」
>.map(item => {
item.custom = item.custom.filter(x => x.type == target);
return item;
})
のところで「残された配列からtypeがA以外のものを削除する」
認識です。（備忘録）

ありがとうございました！

[draq]

細かいですが、「typeがAの配列が一つも含まれていないものを削除する」ではなく、typeがAの配列を含むものだけの配列を新たに作る、が正しいです。filterに削除機能は無いので。

[k49977]

新たに作るイメージですね！承知しました。ありがとうございます