JavaScript

レシピ

オブジェクト

JSONをJavaScriptのオブジェクトに変換する

JSON形式のデータをJavaScriptのオブジェクトに変換する方法について解説します。

この記事のポイント

  • JSON形式のデータを扱いやすいオブジェクト(Object)に変換するときはJSON.parseメソッドを使う
  • JSON.parseメソッドは変換時に実行する処理をオプションとして指定することができる

目次

JSON形式のデータをObject形式のデータに変換する

JSON形式のデータは文字列(String)なのでそのままでは扱いにくいため、通常はJSON形式のデータを受け取った時はObject形式に変換してデータを利用します。
そのときにJSON形式からObject形式への変換ではJSON.parseメソッドを使います。

以下の例ではシンプルなJSON形式のデータをJSON.parseメソッドでObject形式に変換し、各プロパティの値を参照しています。

JavaScript コード例

// JSON形式のデータ
const json_data = '{"title":"Paradise","category":"Rock","release_date":"2019-12-18"}';

// JSON形式からObject形式に変換
let parse_data = JSON.parse(json_data);

// プロパティ名から値を参照
console.log(parse_data.title); // 出力 => Paradise

変換した後のObject形式のデータは変数parse_dataに入ります。
その後は通常のオブジェクトと同様にプロパティへのアクセスが可能になります。

JSON形式からObject形式への基本的な変換は以上ですが、オプションとして変換時に任意の処理を実行することもできます。

Object形式に変換するときに指定した処理を実行する

JSON.parseメソッドはオプションとして、第2パラメータに変換時に実行したい処理を指定することができます。
以下の例では、変換時に用意したreplacer関数を実行して、プロパティ「release_date」の値に含まれる「」を「/」に置き換えます。

JavaScript コード例

// JSON形式のデータ
const json_data = '{"title":"Paradise","category":"Rock","release_date":"2019-12-18"}';

// replacer関数
let replacer = (key, value) => {

	if( key === 'release_date' ) {
		return value.replace(/-/g, '/');
	}

	return value;
};

// 変換時にreplacer関数を実行
let parse_data = JSON.parse(json_data, replacer);

// Object形式の値を出力
console.log(parse_data);

JSON.parseメソッドによる変換が実行される度にreplacer関数が実行されます。
取得した値は以下のようになります。

出力例

{title: "Paradise", category: "Rock", release_date: "2019/12/18"}

replacer関数では正規表現のreplaceメソッドによって、値に含まれる「」を「/」に置換します。
引数ではプロパティ名を変数key、対応する値をvalueに受け取ります。

以上、JSON形式のデータをJavaScriptのObject形式に変換する方法についてでした。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。