【サンプル】JSONデータをJavaScriptのオブジェクトに変換【JSON.parse()】

JSON文字列のデータからJavaScriptのオブジェクトに変換するには、JSON.parse()関数を使用します。

本記事では基本的な使い方から、第二引数の使用方法も含めてご紹介していきます！

構文

JSON.parse(text[, reviver])

第1引数：JSONデータ形式の文字列
第2引数：値を返す前に実行する関数（コールバック関数）

第2引数に関数を指定することで、事前にJSONデータに処理を行った状態でオブジェクトにすることができます。

使い方

JSONデータは文字列（string）型なので、JavaScriptで扱いやすいようにJSON.parse()関数でObjectに変換してから使用します。

JSONデータをJavaScriptのオブジェクトに変換

まずは第1引数だけ指定してJavaScriptのオブジェクトに変換します。

const data = '{"a":10, "b":20, "c":30 }';
const obj = JSON.parse(data);

// {a:10, b:20, c:30}
console.log(obj); 

// 20
console.log(obj.b);

実行結果

1行目はオブジェクト形式のデータが表示されます。

{a:10, b:20, c:30}
20

JSONデータからオブジェクトを返す前に処理を実行

次に第2引数を指定します。
keyとvalueの引数を持つ関数を設定し、関数の戻り値が新しくvalueに設定されます。

ここでの例ではkey=”a”, “b”, “c”、valueは10, 20, 30になり、
keyが”b”の場合のみ、valueを2倍にして返す関数を設定します。

const data = '{"a":10, "b":20, "c":30 }';
const obj = JSON.parse(data, function(key, value){
  if(key==="b"){
      return value * 2;
  }
  return value;
});

console.log(obj);

実行結果でオブジェクトのbに40が設定されていることが確認できます。

{a:10, b:40, c:30}