[javascript] JSONとかのkey-valueオブジェクトの配列から特定のkeyの値だけ取り出して配列や別名のオブジェクトにまとめたい（スプレッド演算子とmap()） - プログラミング

javascriptでオブジェクトの配列から特定のkeyだけ取り出して配列にまとめたい時

例えば、サーバーからユーザー情報をAPIでJSONで取り出してきました。以下のようなJSONがあったとします。このJSONから、useridだけ取り出したい。よくある処理だけど、毎回ループ書くのは面倒。

data:[
{
"userid":1,
"user_name":"xxx"
},
{
"userid":2,
"user_name":"yyy"
},
{
"userid":3,
"user_name":"zzz"
}
]

data:[

{

"userid":1,

"user_name":"xxx"

{

"userid":2,

"user_name":"yyy"

{

"userid":3,

"user_name":"zzz"

}

]

そんなときはスプレッド演算子とmap()を組み合わせると神になれます。

...（ピリオド３つ） と書きます。
配列ライクなオブジェクト（正確には for of で展開できるオブジェクト）を個々の値に展開することができます。

もちろん、古のエンジニアなら普通にforで書くこともできますが、コードが冗長になりがちです。
若くてモダンなjavascriptのスプレッド演算子を使うと。。。

const ids = […data].map(value => value.userid)

結果：[1,2,3]

なんということでしょう！もうfor(const i in data)…とか書く必要は無かったのです！

もちろん、別名のKeyや必要な項目だけ抜き出して、オブジェクトとして再構成することも可能です。

data.map(v=>{
        return { 
             id: v.id, 
             name: v.user_name, 
             icon: v.user_icon
         }
})

data.map(v=>{

return {

id: v.id,

name: v.user_name,

icon: v.user_icon

}

})

結果：[{id:111,name:”namae”,icon:”xxx.ico”}…. ]

というふうに、Keyを変えたり、必要な項目だけを抜き出した別のオブジェクトにまとめ直すことができます。