JavaScriptでオブジェクトの中のオブジェクトを配列に変換する方法

例えば、インドのクリケット選手たちの評価(レーティング)を格納した、次のような「オブジェクトの中にオブジェクトが入った」データがあるとします。これを、各要素が name(選手名)と rating(評価オブジェクト)という2つのプロパティを持つオブジェクトの配列に変換する必要があります。

サンプルオブジェクト

const playerRating = {
    'V Kohli':{
        batting: 99,
        fielding: 99
    },
    'R Sharma':{
        batting: 98,
        fielding: 95
    },
    'S Dhawan':{
        batting: 92,
        fielding: 90
    }
}

解決方法はとてもシンプルです。Object.keys() メソッドを使えば、元のオブジェクトのキーを反復処理しながら、同時に新しい配列へと変換していくことができます。

具体的には、Object.keys() でオブジェクトのすべてのキー(選手名)を配列として取得し、forEach() で1つずつ取り出しながら、{ name: キー, rating: 対応する値 } という形の新しいオブジェクトを生成して配列に追加していきます。

完全なコード例

const playerRating = {
    'V Kohli':{
        batting: 99,
        fielding: 99
    },
    'R Sharma':{
        batting: 98,
        fielding: 95
    },
    'S Dhawan':{
        batting: 92,
        fielding: 90
    }
}
const objArray = [];
Object.keys(playerRating).forEach(key => objArray.push({
    name: key,
    rating: playerRating[key]
}));
console.log(objArray);

出力結果

[
    { name: 'V Kohli', rating: { batting: 99, fielding: 99 } },
    { name: 'R Sharma', rating: { batting: 98, fielding: 95 } },
    { name: 'S Dhawan', rating: { batting: 92, fielding: 90 } }
]

このように、元のオブジェクトの各キーが name プロパティに、キーに対応するネストされたオブジェクトが rating プロパティに格納された配列が完成します。

代替方法:Object.entries() を使う

ES2017以降の環境では、Object.entries() を使ってより簡潔に書くこともできます。キーと値のペアをそのまま受け取れるため、コードが読みやすくなります。

const objArray = Object.entries(playerRating).map(([name, rating]) => ({
    name,
    rating
}));
console.log(objArray);

どちらの方法でも結果は同じですが、変換処理を1行でまとめたい場合や、関数型スタイルを好む場合は Object.entries() と map() の組み合わせが便利です。用途に応じて使い分けるとよいでしょう。