JavaScript で書式設定された読みやすい JSON を生成する

Muhammad Muzammil Hussain 2023年6月20日
  1. JavaScript で書式設定された読みやすい JSON を生成する
  2. parse() メソッドを使用して、書式設定された読みやすい JSON を生成する
  3. stringify() メソッドを使用して、書式設定された読みやすい JSON を生成する
JavaScript で書式設定された読みやすい 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"

    }

コード例の説明:

  1. この JavaScript ソース コードでは、JSON 文字列データを宣言しています。
  2. 次に、parse() メソッドを使用し、JSON 文字列データをパラメーターとして渡し、結果を変数に格納しました。
  3. 最後に、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\"}"

コード例の説明:

  1. 上記の JavaScript ソース コードで JSON オブジェクト データを宣言しました。
  2. その後、stringify() メソッドを使用して、JSON オブジェクト データをパラメータとして渡し、結果を変数に格納しました。
  3. 最後に、console.log() を使用して変換されたデータを表示しました。

関連記事 - JavaScript JSON