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

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

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

構文

JSON.stringify(value[, replacer[, space]])

第1引数：JSONの文字列データに変換するオブジェクト
第2引数：関数か配列を指定してJSONの置き換えを行う
第3引数：可読性を上げるため、JSONデータの項目の前にスペース等を設定可

使い方

JSONの文字列データに変換

まずは第1引数だけ指定して、JavaScriptのオブジェクトをJSONデータに変換します。
オブジェクトでなくとも、値だけ引数を渡してもJSONデータに変換可能です。

// '{"a":10,"b":20,"c":30}'
console.log(JSON.stringify({a:10, b:20, c:30}));

// 1項目目と2項目目は異なる型
// '[true,"true"]'
console.log(JSON.stringify([new Boolean(true), new String('true')]));

// 値だけ
// "5"
console.log(JSON.stringify(5));

実行結果

以下のようにそれぞれJSONの文字列データとして出力されます。

'{"a":10,"b":20,"c":30}'
'[true,"true"]'
"5"

関数、または配列を指定して置き換え処理を実行

第2引数は関数か配列を指定できます。

・keyとvalueの引数を持つ関数を指定することで値を置き換えしたり、除外することができます。

・配列を指定すると、配列に指定されたkeyのみ含めたJSON文字列のみ値を返します。

function replacer(key, value){
  if(typeof value ==="string"){
      return undefined;
  }
  if(key === "c"){
      return value * 2;
  }
  return value;
}

// '{"a":10,"c":60}'
console.log(JSON.stringify({a:10, b:"test", c:30}, replacer));

// '{"b":"test","c":30}'
console.log(JSON.stringify({a:10, b:"test", c:30}, ["b", "c"]));

実行結果

1行目では「key:b」が除外され、「key:c」のvalueが2倍になっています。
2行目では「key:a」が除外されていることが分かりますね！

'{"a":10,"c":30}'
'{"b":"test","c":30}'

関数、または配列を指定して置き換え処理を実行

第3引数を指定することでJSONデータを成形する際のスペースや文字を入れることができます。
※ 指定することで強制的に改行が入るので改行コードは不要になります。

ただし、このスペースや文字列は10文字までしか設定できないため、文字列を10文字以上設定した場合は先頭から10文字分設定されます。

console.log(JSON.stringify({a:10, b:20, c:30},undefined,5));

// 11で設定しているが、スペースは10個までしか反映されない
console.log(JSON.stringify({a:10, b:20, c:30},undefined,11));

console.log(JSON.stringify({a:10, b:20, c:30},undefined,"\t"));

// 11文字設定しているが、10文字までしか反映されない
console.log(JSON.stringify({a:10, b:20, c:30},undefined,"12345678901"));

実行結果

'{
     "a": 10,
     "b": 20,
     "c": 30
}'
'{
          "a": 10,
          "b": 20,
          "c": 30
}'
'{
	"a": 10,
	"b": 20,
	"c": 30
}'
'{
1234567890"a": 10,
1234567890"b": 20,
1234567890"c": 30
}'