javascriptでオブジェクトの配列から特定のkeyだけ取り出して配列にまとめたい時
例えば、サーバーからユーザー情報をAPIでJSONで取り出してきました。以下のようなJSONがあったとします。このJSONから、useridだけ取り出したい。よくある処理だけど、毎回ループ書くのは面倒。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
data:[ { "userid":1, "user_name":"xxx" }, { "userid":2, "user_name":"yyy" }, { "userid":3, "user_name":"zzz" } ] |
そんなときはスプレッド演算子とmap()を組み合わせると神になれます。
...
(ピリオド3つ) と書きます。
配列ライクなオブジェクト(正確には for of で展開できるオブジェクト)を個々の値に展開することができます。
もちろん、古のエンジニアなら普通にforで書くこともできますが、コードが冗長になりがちです。
若くてモダンなjavascriptのスプレッド演算子を使うと。。。
const ids = […data].map(value => value.userid)
結果:[1,2,3]
なんということでしょう!もうfor(const i in data)…とか書く必要は無かったのです!
オブジェクトに再構成したい場合は?
もちろん、別名のKeyや必要な項目だけ抜き出して、オブジェクトとして再構成することも可能です。
1 2 3 4 5 6 7 |
data.map(v=>{ return { id: v.id, name: v.user_name, icon: v.user_icon } }) |
結果:[{id:111,name:”namae”,icon:”xxx.ico”}…. ]
というふうに、Keyを変えたり、必要な項目だけを抜き出した別のオブジェクトにまとめ直すことができます。