JavaScriptでオブジェクトのキーと値を個別のオブジェクトに分割する方法

キーと値を別々のオブジェクトに分割するとは

JavaScriptでは、1つのオブジェクトにまとめられたデータを、キーと値のペアごとに独立したオブジェクトへ変換したい場面があります。たとえば、テーブル形式でのデータ表示やAPIレスポンスの整形などがその代表例です。

ここでは、次のようなオブジェクトを例に考えてみましょう。

const dataset = {
    "diamonds":77,
    "gold-bars":28,
    "exciting-stuff":52,
    "oil":51,
    "sports-cars":7,
    "bitcoins":40
};

このオブジェクトを受け取り、各キーを「asset」プロパティに、対応する値を「quantity」プロパティに持つ個別のオブジェクトからなる配列を返す関数を作成します。

期待される出力は次のとおりです。

const output = [
    {"asset":"diamonds", "quantity":77},
    {"asset":"gold-bars", "quantity":28},
    {"asset":"exciting-stuff", "quantity":52},
    {"asset":"oil", "quantity":51},
    {"asset":"sports-cars", "quantity":7},
    {"asset":"bitcoins", "quantity":40}
];

実装コード

以下が実際のコードです。

const dataset = {
    "diamonds":77,
    "gold-bars":28,
    "exciting-stuff":52,
    "oil":51,
    "sports-cars":7,
    "bitcoins":40
};

const splitKeyValue = obj => {
    const keys = Object.keys(obj);
    const res = [];
    for(let i = 0; i < keys.length; i++){
        res.push({
            'asset': keys[i],
            'quantity': obj[keys[i]]
        });
    };
    return res;
};

console.log(splitKeyValue(dataset));

コードの解説

この関数の仕組みはとてもシンプルです。

• Object.keys()：オブジェクトが持つすべてのキーを文字列の配列として取得します。
• forループ：各キーを順番に処理し、「asset」にキー名、「quantity」にそのキーに対応する値を設定した新しいオブジェクトを生成します。
• push()：生成したオブジェクトを結果用の配列に追加し、最後にその配列を返します。

実行結果

コンソールには次のように出力されます。

[
    { asset: 'diamonds', quantity: 77 },
    { asset: 'gold-bars', quantity: 28 },
    { asset: 'exciting-stuff', quantity: 52 },
    { asset: 'oil', quantity: 51 },
    { asset: 'sports-cars', quantity: 7 },
    { asset: 'bitcoins', quantity: 40 }
]

補足：もっと簡潔に書く方法

ES2017以降で使えるObject.entries()とmap()を組み合わせれば、同じ処理をさらに短く記述できます。

const splitKeyValue = obj =>
  Object.entries(obj).map(([asset, quantity]) => ({ asset, quantity }));

console.log(splitKeyValue(dataset));

Object.entries()は「[キー, 値]」というペアの配列を返すため、明示的なループを書かずに済み、宣言的で読みやすいコードになります。プロジェクトの方針やチームのコーディング規約に応じて、両者を使い分けるとよいでしょう。