オブジェクトの中にオブジェクトが複数存在していおり、そのプロパティ内にある一定の値を出力したい場合がありました。
とても大雑把に結論を書きますと、Object.entriesメソッドでオブジェクトを配列にし、その配列に対しmapメソッドで該当の配列化されたオブジェクトに処理を実行するという形になります。
ユーザー毎に名前と年齢を保持しているオブジェクトがあるとします。
const testObj = {
user1:{
name:"taro",
age:22
},
user2:{
name:"ichiro",
age:29
},
user3:{
name:"sachiko",
age:21
}
}
先ほど作成したtestObjに対し、Object.entriesメソッドを適用することで、配列に変換します。
const test = Object.entries(testObj);
console.log(test);
ここで、変数testの中身は下記の様になっています。
[
[user1,{name:"taro",age:22}],
[user2,{name:"ichiro",age:29}],
[user3,{name:"sachiko",age:21}]
]
配列になったオブジェクトが保管されている変数testに対し、mapメソッドを用いて内容を出力します。
この際、mapメソッドの引数には、「配列の分割代入」、「オブジェクトの分割代入」が使用されます。
配列の分割代入についてはこちら
オブジェクトの分割代入についてはこちら
//引数として[n]番目の配列と、その値を分割代入
test.map(([user,{name,age}])=>{
console.log("user番号は" + user);
console.log("user番号" + user + "の名前は" + name);
console.log("user番号" + user + "の年齢は" + age);
});
// コンソールには下記の様に出力されます。
// user番号はuser1
// user番号user1の名前はtaro
// user番号user1の年齢は22
// user番号はuser2
// user番号user2の名前はichiro
// user番号user2の年齢は29
// user番号はuser3
// user番号user3の名前はsachiko
// user番号user3の年齢は21
上記で、オブジェクトの中にあるオブジェクトを配列化し、該当の値をまとめて出力する処理が可能となります。
APIで取得したJSONをオブジェクトに変換し、その値を表示したいとき等に役立ちます。
