JSON.parse()
JSONの一般的な目的は、Webサーバーを使用したデータ送信です。
Webサーバーからデータを受信する場合、データは常に文字列です。
JSON.parse()を使用してデータを解析すると、これらのデータはJavaScriptオブジェクトになります。
例-JSONの解析
Webサーバーからこのテキストを受け取ったと想像してください：
'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'JavaScript関数JSON.parse()を使用して、テキストをJavaScriptオブジェクトに変換してください：
var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');このテキストがJSON形式で書かれていることを確認してください。そうでないと、文法エラーが発生します。
HTMLでJavaScriptオブジェクトを使用してください：
例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
サーバーからのJSON
AJAXリクエストを使用して、サーバーからJSONをリクエストできます。
サーバーの応答がJSON形式で記述されている限り、文字列を解析してJavaScriptオブジェクトにすることができます。
例
サーバーからデータを取得するには、XMLHttpRequestを使用してください：
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
JSONの配列について
配列から派生したJSONはJSON.parse() を使用した後、このメソッドはJavaScriptオブジェクトではなくJavaScript配列を返します。
例
サーバーから返されるJSONは配列です：
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[0];
}
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
例外
日付の解析について
日付オブジェクトはJSONでは許可されていません。
日付を含める必要がある場合は、文字列として記述してください。
後で日付オブジェクトに戻すことができます：
例
文字列を日付に変換します：
var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
または、 JSON.parse()関数の2番目のパラメーター「reviver」を使用することもできます。
この reviver パラメータは関数であり、値を返す前に各属性をチェックします。
例
文字列を日付に変換するには、reviver関数を使用します。
var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text, function (key, value) {
if (key == "birth") {
return new Date(value);
} else {
return value;
}});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
分析関数
関数はJSONでは許可されていません。
関数を含める必要がある場合は、文字列として記述してください。
後で関数に戻すことができます：
例
文字列を関数に変換します：
var text = '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();
JSONで関数を使用することは避けてください。関数はスコープを失い、 eval()を使用して関数に戻す必要があります。