JavaScriptのJSON

JSON 是存储和传输数据的格式。

JSON 常常在数据从服务器发送到网页时使用。

什么是 JSON？

  • JSON 指的是 JavaScript Object Notation
  • JSONは軽量なデータ交換形式です
  • JSONは言語に依存しません *
  • JSONは「自己記述的」で理解しやすい

* JSONの文法はJavaScriptオブジェクト記号の文法ですが、JSON形式はプレートテキストです。JSONデータの読み取りや生成のコードは、どんなプログラミング言語でも書ける。

JSONインスタンス

JSON文法は、雇員オブジェクトを定義しています：3つの员工レコードを含む配列（オブジェクト）：

JSONインスタンス

{
"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"},
    {"firstName":"Alan", "lastName":"Turing"}
]
}

JSON形式はJavaScriptオブジェクトとして評価されます

JSON形式は、JavaScriptオブジェクトを作成するコードの文法と同じです。

この類似性により、JavaScriptプログラムはJSONデータをローカルのJavaScriptオブジェクトに簡単に変換できます。

JSON文法規則

  • データは名前/値対です
  • データはコンマで区切られます
  • 丸括弧でオブジェクトを保存します
  • 角括弧で配列を保存します

JSONデータ - 名前と値

JSONデータの書き方は、JavaScriptオブジェクト属性に似た名前/値対です。

名前/値対は（ダブルクォート内の）フィールド名で構成され、その後にはコロン、さらにその後には値があります：

"firstName":"Bill"

JSONの名前はダブルクォートが必要ですが、JavaScriptの名前は必要ありません。

JSON オブジェクト

JSONオブジェクトは括弧内で書かれます。

JavaScriptと同様に、オブジェクトは複数の名前/値対を含むことができます：

{"firstName":"Bill", "lastName":"Gates"}

JSON 配列

JSON配列は括弧内で書かれます。

JavaScriptと同様に、配列はオブジェクトを含むことができます：

"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"}, 
    {"firstName":"Alan", "lastName":"Turing"}
]

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

各オブジェクトは、名と姓を持つ人の一つのレコードを表します。

JSONテキストをJavaScriptオブジェクトに変換します

JSONの一般的な使用法は、ウェブサーバーからデータを読み取り、それをウェブページで表示することです。

簡単にするために、文字列を使用して入力をデモンストレーションできます。

まず、JSON文法を含むJavaScript文字列を作成します：

var text = '{ "employees" : [
'{ "firstName":"Bill" , "lastName":"Gates" },' +
'{ "firstName":"Steve" , "lastName":"Jobs" },' +
'{ "firstName":"Alan" , "lastName":"Turing" } ]}';

次に、JavaScript の内蔵関数 JSON.parse() を使用して、この文字列を JavaScript オブジェクトに変換します：

var obj = JSON.parse(text);

最後に、新しい JavaScript オブジェクトを使用して、以下のページにこのコードを追加してください：

インスタンス

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

自分で試してみる

私たちの JSON ガイド JSON に関するさらに詳しい情報はここで読むことができます。