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

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

JavaScriptでオブジェクト（Object）形式のデータをJSON形式のデータに変換するときは、JSON.stringifyメソッドを使います。

JS コード例

// JSON形式に変換するObject形式のデータ
const data = [
  {
    "title": "K331",
    "category": {
      "category1": "Classic",
      "category2": "Country",
      "category3": "Pops"
    },
    "release_date": "2019-11-25"
  },
  {
    "title": "Paradise",
    "category": "Rock",
    "release_date": "2019-12-18"
  },
  {
    "title": "Baby",
    "category": "Pops",
    "release_date": "2020-01-07"
  }
];

// JSON形式のデータに変換する
let json_data = JSON.stringify(data);

変換した後のJSON形式のデータは文字列（String）になります。
console.logメソッドなどで出力すると次のような単一の文字列が出力されます。

出力例

[{"title":"K331","category":"Classic","release_date":"2019-11-25"}, ... 省略

JSON形式に変換する基本的な操作は以上ですが、オプションとして変換するプロパティを選択したり、置き換えたり、スペーサーに使う文字列を指定することができます。
以降は、これらのオプションについて1つずつ紹介していきます。

JSON形式に変換するプロパティを選択する

Object形式のデータをそのままJSON.stringifyメソッドに渡すと全てのプロパティをJSON形式に変換します。
JSON.stringifyメソッドの第2パラメータには変換したいプロパティ名を並べた配列を渡すと、変換する対象を選択することができます。

以下の例ではプロパティ「title」と「category」のみをJSON形式に変換し、「release_date」は変換に含めずに変換を実行します。

JS コード例

// JSON形式に変換するObject形式のデータ
const data = [
  {
    "title": "K331",
    "category": "Classic",
    "release_date": "2019-11-25"
  },
  {
    "title": "Paradise",
    "category": "Rock",
    "release_date": "2019-12-18"
  },
  {
    "title": "Baby",
    "category": "Pops",
    "release_date": "2020-01-07"
  }
];

// JSON形式のデータに変換する
let json_data = JSON.stringify(data, ['title','category']);

変数json_dataの中には、次のようなJSON形式のデータが入ります。

出力例

[{"title":"K331","category":"Classic"},{"title":"Paradise","category":"Rock"},{"title":"Baby","category":"Pops"}]

変換前のObject形式のデータからプロパティ「title」と「category」のみをJSON形式に変換できていることが確認できます。

以下のような入れ子になっているデータについても、変換したいプロパティ名を配列に含めることで同様の操作が可能です。

JS コード例

// JSON形式に変換するObject形式のデータ
const data = [
  {
    "title": "K331",
    "category": {
      "c1": "Clasic",
      "c2": "Countly",
      "c3": "Popular"
    },
    "release_date": "2019-11-25",
    "flag": true
  }
];

// JSON形式のデータに変換する
let json_data = JSON.stringify(data, ['title','category','c1','c3']);

こちらのコードでは入子になったプロパティ「c1」と「c3」は変換対象にして、プロパティ「c2」は対象外にして変換を実行します。
変換後は以下のような値を取得することができます。

出力例

[{"title":"K331","category":{"c1":"Clasic","c3":"Popular"}}]

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

JSON.stringifyメソッドの第2パラメータはJSON形式に変換するプロパティの指定の他に、関数を渡すことで変換時にプロパティの値に対してなにかしらの処理を実行することもできます。

以下の例では、変換時に用意したreplacer関数を実行して、プロパティ「release_date」の値に含まれる「–」を「/」に置き換えます。

JS コード例

// JSON形式に変換するObject形式のデータ
const data = [
  {
    "title": "K331",
    "category": {
      "category1": "Classic",
      "category2": "Country",
      "category3": "Pops"
    },
    "release_date": "2019-11-25"
  },
  {
    "title": "Paradise",
    "category": "Rock",
    "release_date": "2019-12-18"
  },
  {
    "title": "Baby",
    "category": "Pops",
    "release_date": "2020-01-07"
  }
];

// JSON形式のデータに変換する
let json_data = JSON.stringify(data, replacer);

// 変換時に呼び出すreplacer関数
let replacer = (key, value) => {

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

	return value;
};

JSON.stringifyメソッドが実行される度にreplacer関数が実行されます。
replacer関数ではプロパティ「release_date」のときに正規表現による文字列の置換を行います。
例えば、値が「2019-11-25」だとすると「2019/11/25」に置き換えられます。

JSON形式に変換した後の値をconsole.logメソッドなどで出力すると以下のようになります。

出力例

[{"title":"K331","category":"Classic","release_date":"2019/11/25"}, ... 省略

JSON形式に変換後の値のスペーサー文字列を指定する

JSON.stringifyメソッドの第3パラメータには、JSON形式に変換した後の文字列の中で使用するスペーサーを指定することができます。

スペーサーとは文字間に挿入される空白などの文字で、特に指定がないときはスペーサーは挿入されません。
例えば、JSON.stringifyメソッドを第1パラメータのみ指定して実行したときは以下のようになります。

JS コード例

// JSON形式に変換するObject形式のデータ
const data = {
	"title": "Paradise",
	"category": "Rock",
	"release_date": "2019-12-18"
};

// JSON形式のデータに変換する
let json_data = JSON.stringify(data);

// 変換後の値を出力
console.log(json_data);

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

続いて、スペーサーを指定して実行すると以下のように変換後の値に半角スペースが挿入されます。

JS コード例

// JSON形式に変換するObject形式のデータ
const data = {
	"title": "Paradise",
	"category": "Rock",
	"release_date": "2019-12-18"
};

// JSON形式のデータに変換する
let json_data = JSON.stringify(data, null, ' ');

// 変換後の値を出力
console.log(json_data);

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

プロパティ名や値の前に半角スペースが挿入されます。
挿入する文字列は半角スペース以外でも自由に指定することができます。

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

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