オブジェクトが持つ任意のキーに対する値を配列に入れ込みたい

はじめに

よくあるやつだと思いますが、備忘録としてまとめておきたいと思います。

やりたいこと

下記のようなオブジェクトをフロントで受け取った際、
view_data = ['12345678', '87654321']のようにdata_idsを配列に入れ込みたい。

 allowed_data = [
    {
        "id": "1",
        "data_ids": [
            "12345678"
        ]
    },
    {
        "id": "2",
        "data_ids": [
            "12345678",
            "87654321"
        ]
    },
    {
        "id": "3"
    },
    {
        "id": "4",
        "data_ids": [
            "12345678"
        ]
    }
]

手順① .map

.mapを使ってオブジェクトが持つ各要素(id)毎にdata_idsを取得します。

allowed_data.map((d) => d.data_ids)

[
    [
        "12345678"
    ],
    [
        "12345678",
        "87654321"
    ],
    undefined,
    [
        "12345678"
    ]
]

配列の各要素を見てみると、更に配列になっている要素がありますね。
重複している要素も排除したいです。

手順② ...new Setと.flat

...new Setで重複を排除し、.flatで一次元配列に変換しましょう。

[...new Set(allowed_data.map((d) => d.data_ids).flat())]

するとこのようになります。

["12345678","87654321", undefined]

手順③ .filter

undefinedを排除しましょう。

[...new Set(allowed_data.map((d) => d.data_ids).flat())].filter(v => v !== undefined) 

できました！

["12345678","87654321"]

おわりに

複数の言語を触っていると忘れがちになります。