JSON 基礎トレーニング

JSON.parse() 解析

JSONはWebサーバーとのデータ交換に使用されます。Webサーバーからデータを受け取るとき、データは常に文字列です。

JSON.parse()メソッドはJSON文字列を解析し、JavaScript値またはその文字列が表すオブジェクトを構築します。

構文:

JSON.parse(text, reviver)

最初のパラメータは、JSONにパースする文字列を指定します。

二番目のオプションのパラメータは、返り値の前に各属性をチェックする関数を指定します。

JSONの解析

仮にWebサーバーから以下のテキストを受け取ったとします：

　{"name":"Seagull", "age":22, "city":"New Delhi"}'

JSON.parse()メソッドを使用して、JSONテキストをJavaScriptオブジェクトに変換することができます：

例

var myObj = JSON.parse('{"name":"Seagull", "age":22, "city":"New Delhi"});

テストをしてみる‹/›

サーバーからのJSON

AJAXリクエストを使用してサーバーからJSONをリクエストできます。

もしサーバーからの応答がJSON形式で書かれていれば、文字列をJavaScriptオブジェクトにパースすることができます。

以下のサンプルリクエストファイルdemo.jsonそして応答を解析します：

例

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
　　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　　　var myObj = JSON.parse(this.responseText);
　　　　　　document.getElementById("output").innerHTML = myObj.name;
　　　}
};
httpRequest.open("GET", "demo.json", true);
httpRequest.send();

テストをしてみる‹/›

配列としてのJSON

JSON.parse()は配列から派生したJSON上でメソッドを使用すると、JavaScriptオブジェクトではなくJavaScript配列が返されます。

以下のサンプルリクエストファイルjson_array.txtそして応答を解析します：

例

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
　　　if (this.readyState ===　4　&& this.status ===　200) {
　　　　　　var myArr = JSON.parse(this.responseText);
　　　　　　document.getElementById("output").innerHTML = myArr[0];
　　　}
};
httpRequest.open("GET", "json_array.txt", true);
httpRequest.send();

テストをしてみる‹/›

日付の解析

JSONでは日付オブジェクトを使用することはできません。

日付を含める必要がある場合は、文字列として書き込み、その後日付オブジェクトに変換します。

例

var myJSON = '{"name":"Seagull", "birth":"1997-11-10", "city":"New Delhi"}';
var myObj = JSON.parse(myJSON);
myObj.birth = new Date(myObj.birth);
document.getElementById("output").innerHTML = myObj.name　+　"　DOB　is　"　+　myObj.birth;

テストをしてみる‹/›

注意：文字列をローカルオブジェクトに変換することを解析、そしてローカルオブジェクトをネットワークで送信できるように変換する文字列呼ばれる文字列化。

JSON.stringify()JSONデータ型