JavaScript JSON

JSON はデータの保存と送信に使用される形式です。

JSON は通常、サーバーから Web ページにデータを転送するために使用されます。


JSON とは何ですか?

  • JSON、英語の完全名は JavaScript Object Notation

  • JSON は軽量のデータ交換形式です。

  • JSONは独立した言語です ※

  • JSONは理解しやすいです。


ヒント: JSON は JavaScript 構文を使用しますが、JSON 形式は単なるテキストです。
テキストは任意のプログラミング言語で読み取ることができ、データ形式として渡すことができます。


次の JSON 構文は従業員オブジェクトを定義します: 3 つの従業員レコードの配列 (オブジェクト):

{"employees":[
{"firstName":"John", "lastName":"Doe"} 、
{"firstName":"Anna", "lastName":"Smith"}、
{"firstName":"Peter", "lastName":"Jones"}
]}


JSON 形式JSON 形式は、JavaScript オブジェクトを作成するコードと構文的には同じです。 これらは似ているため、JavaScript プログラムは JSON データを JavaScript オブジェクトに簡単に変換できます。

JSON 構文ルール


データはキーと値のペアです。

  • データはカンマで区切られます。

  • 中かっこはオブジェクトを保存します

  • 角かっこは配列を保存します

JSONデータ - 1つの名前が1つの値に対応します

JSONデータ形式は、JavaScriptオブジェクトのプロパティと同様に、キーと値のペアです。

キーと値のペアは、フィールド名 (二重引用符で囲まれた)、コロン、値で構成されます:

"firstName":"John"


JSON オブジェクト

JSON オブジェクトは括弧内に大きく保存されます。

JavaScript と同様に、オブジェクトは複数のキーと値のペアを保持できます:

{"firstName":"John", "lastName":"Doe"}


JSON 配列

JSON 配列角括弧内に格納されます。

JavaScript と同様に、配列には次のオブジェクトを含めることができます:

"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", " lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]

上記の例では、オブジェクト "employees" は配列です。 3 つのオブジェクトが含まれます。

各オブジェクトは従業員 (姓と名) の記録です。


JSON文字列をJavaScriptオブジェクトに変換します

通常、私たちはサーバーからJSONデータを読み取り、Webページにデータを表示します。

簡単にするために、Web ページに JSON 文字列を直接設定します。

まず、文字列は JSON 形式のデータです:

var text = '{ "employees" : [' +
'{ " firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName" :"Peter" , "lastName":"Jones" } ]}';

次に、JavaScript 組み込み関数 JSON.parse() を使用して、文字列を JavaScript オブジェクトに変換します:

var obj = JSON。解析(テキスト);

最後に、ページで新しい JavaScript オブジェクトを使用します:

インスタンス

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<body>
<h2>为 JSON 字符串创建对象</h2>
<p id="demo"></p>
<script>
    var text = '{"employees":[' +
            '{"firstName":"John","lastName":"Doe" },' +
            '{"firstName":"Anna","lastName":"Smith" },' +
            '{"firstName":"Peter","lastName":"Jones" }]}';
    obj = JSON.parse(text);
    document.getElementById("demo").innerHTML =
            obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>
</html>

プログラムを実行して試してみましょう


関連関数

関数 説明
JSON.parse() は、JSON 文字列を JavaScript オブジェクトに変換するために使用されます。
JSON.stringify()は、JavaScriptの値をJSON文字列に変換するために使用されます。



学び続ける
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h2>为 JSON 字符串创建对象</h2> <p id="demo"></p> <script> var text = '{"employees":[' + '{"firstName":"John","lastName":"Doe" },' + '{"firstName":"Anna","lastName":"Smith" },' + '{"firstName":"Peter","lastName":"Jones" }]}'; obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName; </script> </body> </html>