JavaScriptでネストされたJSONオブジェクトを構築する方法
ネストされたJSONオブジェクトを文字列から生成する
JavaScriptでは、2文字ずつのペアで構成された特殊な形式の文字列から、階層的な(ネストされた)オブジェクトを構築したいケースがあります。例えば、次のような文字列が与えられたとします。
const str = "AABBCCDDEE";
この文字列をもとに、以下のようなオブジェクトを生成することが目標です。
const obj = {
code: "AA",
sub: {
code: "BB",
sub: {
code: "CC",
sub: {
code: "DD",
sub: {
code: "EE",
sub: {}
}
}
}
}
};
ポイント
- 文字列から取り出した2文字ごとのペアが、各レベルの
codeプロパティに対応します。 - ペアが存在する限り、その下に新しい
subオブジェクトを作成して階層をつなげていきます。 - 最後のペアの後には、空の
subオブジェクトが置かれます。
解決アプローチ:ループと参照を使った反復処理
この問題は再帰関数でも解けますが、ここではよりシンプルなwhileループとオブジェクト参照を使う方法を紹介します。考え方は以下の通りです。
- 結果を格納するための空のオブジェクト
resを用意し、現在の操作対象を指す参照変数refに代入します。 - 文字列が空になるまで、先頭から2文字ずつ切り出します。
- 切り出したペアを
ref.codeに設定し、新しい空のsubオブジェクトを作成します。 - 参照
refを新しく作ったsubオブジェクトへ移動させ、同じ処理を繰り返します。
このように参照をたどっていくことで、深くネストした構造でも簡潔なコードで構築できます。
実装コード例
const str = "AABBCCDDEE";
const constructObject = str => {
const res = {}; // 最終的に返すオブジェクト
let ref = res; // 現在の階層を指す参照
while (str) {
const words = str.substring(0, 2); // 先頭2文字を取得
str = str.substr(2, str.length); // 残りの文字列を更新
ref.code = words; // codeプロパティにペアを設定
ref.sub = {}; // 新しいsubオブジェクトを作成
ref = ref.sub; // 参照を一段深い階層へ移動
};
return res;
};
console.log(JSON.stringify(constructObject(str), undefined, 4));
コードのポイント
substring(0, 2)で文字列の先頭2文字を取り出し、substr(2)で残りを切り詰めています。ref = ref.sub;の部分が重要です。これにより、毎回オブジェクトの先頭ではなく、直前に作成したsubを基準に次の階層を追加できます。JSON.stringify(obj, undefined, 4)を使うことで、インデント付きの整形されたJSONとしてコンソールに出力できます。
実行結果
このコードをコンソールで実行すると、次のような出力が得られます。
{
"code": "AA",
"sub": {
"code": "BB",
"sub": {
"code": "CC",
"sub": {
"code": "DD",
"sub": {
"code": "EE",
"sub": {}
}
}
}
}
}
期待どおり、各ペアが code プロパティとして格納され、入れ子状の sub オブジェクトで連結された構造が生成されていることがわかります。この手法は、階層的なデータ構造(ツリー構造など)をフラットな文字列や配列から組み立てる際にも応用できる汎用的なパターンです。
-
JSONテキストをJavaScriptのJSONオブジェクトに変換する方法を解説
JavaScriptでは、JSON.parse()メソッドを使用することで、JSON形式のテキスト文字列をJavaScriptオブジェクトへと変換できます。このメソッドは、APIから取得したデータやサーバーとの通信で受け取ったJSON文字列を、プログラム内で扱いやすいオブジェクトにパースする際に非常に重要な役割を果たします。 以下は、JSONテキストをJavaScriptオブジェクトに変換する具体的なコード例です。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /&
-
【JavaScript】配列内のネストされたオブジェクトの値を合計する方法
この記事では、JavaScriptを使って、配列内にネストされた(入れ子構造の)オブジェクトの値を合計する方法を解説します。サンプルコードでは、JSONデータの複数階層に格納された数値(costNum)を順番に取り出し、その合計をブラウザ上に表示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=d