JavaScript で書式設定された読みやすい JSON を生成する
- JavaScript で書式設定された読みやすい JSON を生成する
-
parse()
メソッドを使用して、書式設定された読みやすい JSON を生成する -
stringify()
メソッドを使用して、書式設定された読みやすい JSON を生成する
JSON は JavaScript Object Notation の略です。 これは、構造化データを表す JavaScript 構文に基づく標準的なテキストベースの形式です。 通常、JSON は Web アプリケーションでデータを転送します。たとえば、データ クライアントをサーバーからサーバーへ、サーバーからクライアントへ送信します。
JSON では、以下に示すように、キーと値のペアでデータを保存します。
JSON 構造:
{
"StringData": "name",
"IntData": 10,
"booleanData": true,
"arrayData":[]
}
JavaScript で書式設定された読みやすい JSON を生成する
データをより読みやすい形式に変換するために、変換用の JavaScript のデフォルト メソッドがあります。 Web 開発では、サーバーにデータを送信するとき、またはサーバーからレコードを取得する必要がある場合に、共通の懸念に直面します。 ほとんどの場合、サーバーから生の JSON 文字列を取得します。
自分で JavaScript オブジェクトに変換する必要があります。 サーバーにデータを送信する場合は、主に JSON 文字列に変換する必要があります。
JavaScript には、parse()
と stringify()
の 2つのメソッドがあり、両方のタイプの変換を実現します。
parse()
メソッドを使用して、書式設定された読みやすい JSON を生成する
JavaScript では、parse()
メソッドを使用して、JSON 文字列データを JavaScript オブジェクトに変換できます。 このメソッドは JSON 文字列を受け入れ、JavaScript オブジェクトをパラメーターとして返します。
基本的な構文:
let objectData = JSON.parse(jsonStringData);
コード例:
<script>
let stringJSON = '{"name":"user name", "age":15, "city":"city name"}'
const javascriptObject = JSON.parse(stringJSON);
console.log("converted data :")
console.log(javascriptObject)
</script>
出力:
"converted data :"
{
age: 15,
city: "city name",
name: "user name"
}
コード例の説明:
- この JavaScript ソース コードでは、JSON 文字列データを宣言しています。
- 次に、
parse()
メソッドを使用し、JSON 文字列データをパラメーターとして渡し、結果を変数に格納しました。 - 最後に、
console.log()
を使用して変換されたデータを表示しました。
stringify()
メソッドを使用して、書式設定された読みやすい JSON を生成する
JavaScript では、stringify()
メソッドを使用して、JavaScript オブジェクトを JSON 文字列データに変換できます。 パラメータとして、このメソッドは JavaScript オブジェクトを受け入れます。
基本的な構文:
let jsonString = JSON.stringify(jsonObject);
コード例:
<script>
let jsonObject = {
age: 15,
city: "city name",
name: "user name"
}
const jsonString = JSON.stringify(jsonObject);
console.log("converted data :")
console.log(jsonString)
</script>
出力:
"converted data :"
"{\"age\":15,\"city\":\"city name\",\"name\":\"user name\"}"
コード例の説明:
- 上記の JavaScript ソース コードで JSON オブジェクト データを宣言しました。
- その後、
stringify()
メソッドを使用して、JSON オブジェクト データをパラメータとして渡し、結果を変数に格納しました。 - 最後に、
console.log()
を使用して変換されたデータを表示しました。