JavaScript オブジェクトをJSON文字列にする(stringify)

JavaScriptのオブジェクトをJSON文字列にするサンプルです。
stringifyメソッドを使用します。

確認環境
・Windows10
・Google Chrome

目次

stringifyメソッド

変数 = JSON.stringify(jsのオブジェクト[, 関数/配列[, 数値]])
  • JavaScriptのオブジェクトを受け取ってJSON文字列にします。
  • 2つめの引数は、関数または配列を指定できます。3つめの引数のみを指定したい場合は、nullを指定します。
  • 3つめの引数は、指定した数値分の空白文字でインデントします。最大10文字です。
  • 戻り値は、JSON文字列です。
  • 以下は、MDNのstringifyのリンクです。
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

 

JavaScriptのオブジェクトをJSON文字列にする

JavaScriptのオブジェクトをJSON文字列にするサンプルです。

<script>
const obj1 = {color1:"赤",color2:"青"};

console.log(obj1.color1);//赤

const json1 = JSON.stringify(obj1);

console.log(json1); //{"color1":"赤","color2":"青"}

</script>

2行目は、オブジェクトです。
4行目は、オブジェクトの確認をしています。
6行目は、stringifyメソッドでJavaScriptのオブジェクトをJSON文字列にしています。
8行目は、JSON文字列が表示されています。

 

関数を使用する

関数でキーを指定して値を変更するサンプルです。

<script>
const obj1 = {color1:"赤",color2:"青"};

const json1 = JSON.stringify(obj1,(key,value)=>{
	if ( key=="color1" ){
		return "red";
	}
	return value ;
});

console.log(json1); //{"color1":"red","color2":"青"}

</script>

2行目は、オブジェクトです。
4行目は、stringifyメソッドの2つめの引数は関数です。
5-8行目は、キーがcolor1のとき、値をredで返し、それ以外はそのまま返します。
11行目は、指定したキー(color1)の値のみが変更されています。JSON文字列です。

 

配列を使用する

配列を指定して、オブジェクトのキーと一致したデータのみ取得するサンプルです。

<script>
const obj1 = {color1:"赤",color2:"青",color3:"黄"};

const json1 = JSON.stringify(obj1,["color1","color3"]);

console.log(json1); //{"color1":"赤","color3":"黄"}

</script>

2行目は、オブジェクトです。
4行目は、stringifyメソッドの2つめの引数は配列です。
6行目は、4行目で指定したキーのデータのみが表示されます。JSON文字列です。

 

インデントを設定する

インデントを設定するサンプルです。

<script>
const obj1 = {color1:"赤",color2:"青"};

const json1 = JSON.stringify(obj1,null,1);

console.log(json1);
//{
// "color1": "赤",
// "color2": "青"
//}

const json2 = JSON.stringify(obj1,null,10);

console.log(json2);
//{
//          "color1": "赤",
//          "color2": "青"
//}
</script>

4行目は、インデントを1に設定しています。
12行目は、インデントを10に設定しています。

関連の記事

JavaScript オブジェクトを作成するサンプル
JavaScript prototypeでメソッドを追加するサンプル
JavaScript 継承のサンプル(プロトタイプチェーン)
JavaScript 連想配列のサンプル
JavaScript JSON文字列をオブジェクトにする(parse)

△上に戻る