jsonデータからidだけの配列を作りたい

Question

前提・実現したいこと

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

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

具体的には以下です。
以下の配列をtypeがAのidの配列に編集したいです。

// APIからのレスポンスJSON.type=Bのcustom.idだけにしたい
[
    {
        "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がBだけのcustom.id配列
[1,3]

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

###試したこと
以下のように実装しています。
map,flatmap,filterを使ってやろうとしています。

以下検討中

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"
        }
      ]
    }
  ];

const target = "B";
const result = a.map(it=>{
it.custom.filter(x=>{
console.log("1");
console.log(JSON.stringify(it));
return x.type==target;
});
}).map(y=>{
console.log("2");
console.log(JSON.stringify(y));
return y.id;
})
.flatMap(z=>z);

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

Comments

[matobaa]

https://teratail.com/questions/342596#reply-471001

Answer 1

最終形態が以下です。

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"
        },
        {
          id: 4,
          name: "乙-3",
          type: "B"
        }
      ]
    },
    {
      id: 3,
      name: "龍グループ",
      custom: [
        {
          id: 5,
          name: "龍-1",
          type: "A"
        }
      ]
    }
  ];

const target = "B";
const result = a
  .flatMap((x) => x.custom.filter((c) => c.type === target))
  .map((y) => y.id);

console.log(JSON.stringify(result));
// [1,3,4]

最終形態までの経緯（上から下へ新しくなっていきます）

一応以下でいけました。（もっといい方法ないかな。。y[0]あたりが怪しい）
https://codesandbox.io/s/icy-cdn-jfbb3?file=/src/index.js

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"
        }
      ]
    }
  ];

const target = "B";
console.log(JSON.stringify(a));

const result = a
  .map((x) => x.custom.filter((c) => c.type === target))
  .flatMap((y) => y[0].id);

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

追記

y[0]がnullだとidがとれないので対応.リファクタリングできそうな気がする

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"
        }
      ]
    },
    {
      id: 3,
      name: "龍グループ",
      custom: [
        {
          id: 4,
          name: "龍-1",
          type: "A"
        }
      ]
    }
  ];

const target = "B";
// console.log(JSON.stringify(a));

const result = a
  .map((x) => x.custom.filter((c) => c.type === target))
  .filter((y) => y[0])
  .map((y) => y[0].id);

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

追記２

該当項目が１グループに複数のときだめですね。。y[0]としているからかもですが、じゃあどうしよう。。

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"
        },
        {
          id: 4,
          name: "乙-3",
          type: "B"
        }
      ]
    },
    {
      id: 3,
      name: "龍グループ",
      custom: [
        {
          id: 5,
          name: "龍-1",
          type: "A"
        }
      ]
    }
  ];

const target = "B";
// console.log(JSON.stringify(a));

const result = a
  .map((x) => x.custom.filter((c) => c.type === target))
  .filter((y) => y[0])
  .map((y) => y[0].id);

console.log(JSON.stringify(result));
// [1,3] ([1,3,4]となるはず)

追記３

flat()を挟むことで配列の深さを修正することができました

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"
        },
        {
          id: 4,
          name: "乙-3",
          type: "B"
        }
      ]
    },
    {
      id: 3,
      name: "龍グループ",
      custom: [
        {
          id: 5,
          name: "龍-1",
          type: "A"
        }
      ]
    }
  ];

const target = "B";
// console.log(JSON.stringify(a));

const result = a
  .map((x) => x.custom.filter((c) => c.type === target))
  .filter((y) => y)
  .flat()
  .map((y) => y.id);

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

追記４

リファクタリング。flatMapを使えば１行減りました.filterも上でやっているのでnull排除できていそうなのでいらなそう。

const result = a
  .flatMap((x) => x.custom.filter((c) => c.type === target))
  // .filter((y) => y)
  // .flat()
  .map((y) => y.id);