JavaScriptでJSON配列を反復処理する方法

JavaScriptでJSON配列を反復処理するには、JSON.parse()メソッドを使用します。特に、APIから取得した文字列形式のJSONデータを配列として扱う場合、各要素を実際のオブジェクトへ変換してから操作するのが一般的なアプローチです。

サンプルコード

以下は、文字列形式のJSONデータが格納された配列に対してmap()メソッドと組み合わせてJSON.parse()を使い、各要素をJSONオブジェクトへ変換するコード例です。

var apiValues =
   [
      '{"name": "John", "scores": [78, 89]}',
      '{"name": "David", "scores": [58, 98]}',
      '{"name": "Bob", "scores": [56, 79]}',
      '{"name": "Mike", "scores": [94, 91]}'
   ];
var parseJSONObject = apiValues.map(obj => JSON.parse(obj));
console.log("The original String : ", apiValues);
console.log("The JSON Objects : ", parseJSONObject);

コードのポイント

• apiValues: 各要素がJSON文字列となっている配列です。
• map(obj => JSON.parse(obj)): 配列の各要素に対してJSON.parse()を適用し、文字列をオブジェクトに変換した新しい配列を生成します。
• parseJSONObject: 変換後のオブジェクト配列が格納されます。

プログラムの実行方法

上記のプログラムを実行するには、Node.js環境で以下のコマンドを使用します。

node fileName.js

ここでは、ファイル名を「demo252.js」として保存しています。

実行結果

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

PS C:\Users\Amit\javascript-code> node demo252.js
The original String :  [
   '{"name": "John", "scores": [78, 89]}',
   '{"name": "David", "scores": [58, 98]}',
   '{"name": "Bob", "scores": [56, 79]}',
   '{"name": "Mike", "scores": [94, 91]}'
]
The JSON Objects :  [
   { name: 'John', scores: [ 78, 89 ] },
   { name: 'David', scores: [ 58, 98 ] },
   { name: 'Bob', scores: [ 56, 79 ] },
   { name: 'Mike', scores: [ 94, 91 ] }
]

出力を見ると、「The original String」では各要素が引用符で囲まれた文字列として表示されているのに対し、「The JSON Objects」ではnameやscoresといったプロパティを持つオブジェクトとして表示されていることがわかります。これにより、JSON.parse()によって文字列が正しくオブジェクトへ変換され、その後プロパティへのアクセスや反復処理が可能になったことが確認できます。