https://idea-hack.com/courses/how-to-use-json-in-javascript/lessons/how-to-use-json-stringifyobj-method-to-convert-json-format-object-to-json-format-string-with-javascript/
https://idea-hack.com/courses/how-to-use-json-in-javascript/lessons/how-to-use-json-stringifyobj-method-to-convert-json-format-object-to-json-format-string-with-javascript/

JavaScriptでJSON形式のオブジェクトをJSON形式の文字列に変換するJSON.stringify(obj)メソッドの使い方

JavaScriptでJSON形式のオブジェクトをJSON形式の文字列に変換するJSON.stringify(obj)メソッド

JavaScriptでJSON形式オブジェクトをJSON形式の文字列に変換するにはJSON.stringify(obj)メソッドを使います。

このメソッドは外部にデータを送信する際に使用します。

文字列にすることで、データが無害化されます。

メソッド

メソッド意味返り値
JSON.stringify(obj,[関数],[インデント])JavaScriptオブジェクトをJSON文字列に変換する
第二引数に[関数]を指定することで、変換ルールを定義可能
第三引数に[インデント]を指定することで、変換データの整形が可能
文字列
JSON.stringify(obj)の仕様

サンプルコード

サンプルコードとして、JSON形式のオブジェクト型データをJSON形式の文字列データに変換して、画面上に表示するコードを紹介します。

変換ルール・インデントなし

まずは、最も一般的な、変換ルールもインデントも無い状態のサンプルコードを紹介します。

Output
変換されたJSONデータ
Pug
table.table
			tbody
				tr
					th 変換されたJSONデータ
					td#targetText
JavaScript
const targetText = document.getElementById("targetText");

//JSON形式で書いたオブジェクト
const targetJsonObj = {
  "name": "直近のユーザーデータ",
  "users": [
    {
      "country": "japan",
      "age": 20,
      "name": "sample user"
    },
    {
      "country": "australia",
      "age": 21,
      "name": "sample user2"
    }
  ]
};

//JSON形式で書いたオブジェクトをJSON形式の文字列データに変換する
const targetJsonData = JSON.stringify(targetJsonObj);

targetText.innerHTML = targetJsonData;

変換ルールを適用する

JSON.stringify()メソッドの第二引数はリプレイサーと呼ばれる変換ルールを定義した関数を指定することが可能です。

JSONデータへ変換する時に独自のルールを設定できます。

例えば、値が数値の場合は無視して取り除きし、文字列だけを変換するようにするには以下のようにします。

Output
変換されたJSONデータ(変換ルール適用)
Pug
table.table
			tbody
				tr
					th 変換されたJSONデータ(変換ルール適用)
					td#targetText2
JavaScript
const targetText2 = document.getElementById("targetText2");
//JSON形式で書いたオブジェクト
const targetJsonObj2 = {
  "name": "直近のユーザーデータ",
  "users": [
    {
      "country": "japan",
      "age": 20,
      "name": "sample user"
    },
    {
      "country": "australia",
      "age": 21,
      "name": "sample user2"
    }
  ]
};
//JSON形式で書いたオブジェクトを値が数値のキーを除いた状態でJSON形式の文字列データに変換する
const targetReplacer = (key,value) => {
	//数値だったら無視
	if (typeof value === 'number') {
		return undefined;
	}
	return value;
}

const targetJsonData2 = JSON.stringify(targetJsonObj, targetReplacer);
targetText2.textContent = targetJsonData2;

キーがageのデータだけ無視されているのを確認してください

また、変換ルールを使用しない場合は第二引数に「null」を指定してください。

変換ルールを適用し、かつインデントを加える

JSON.stringify()メソッドの第三引数はJSON文字列に改行とインデントを挿入するために使います。

インデントとして利用したい文字列を指定します。この時下記のルールがあります。

  • 数値を指定した場合は「スペースの数」になります。
  • 文字列を指定した場合は「その文字列」

サンプルコードは下記の通りです。

Output
変換されたJSONデータ(変換ルールとインデントを適用)
Pug
table.table
			tbody
				ttr
					th 変換されたJSONデータ(変換ルールとインデントを適用)
					td#targetText3
JavaScript
const targetText3 = document.getElementById("targetText3");
//JSON形式で書いたオブジェクト
const targetJsonObj3 = {
  "name": "直近のユーザーデータ",
  "users": [
    {
      "country": "japan",
      "age": 20,
      "name": "sample user"
    },
    {
      "country": "australia",
      "age": 21,
      "name": "sample user2"
    }
  ]
};
//JSON形式で書いたオブジェクトを値が数値のキーを除いた状態でJSON形式の文字列データに変換する
const targetReplacer3 = (key,value) => {
	//数値だったら無視
	if (typeof value === 'number') {
		return undefined;
	}
	return value;
}

//const targetJsonData3 = JSON.stringify(targetJsonObj3, targetReplacer3, " ");
const targetJsonData3 = JSON.stringify(targetJsonObj3, targetReplacer3, "<br>");
targetText3.innerHTML = targetJsonData3;
インストラクター