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形式で書かれていることを確認してください。そうでない場合、文法エラーが発生します。
例
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
サーバーからのJSON
AJAXを使用して、サーバーからJSONを取得できます。
サーバーから取得したデータがJSON形式で記述されている場合、文字列を解析してJavaScriptにすることができます。 p>
例
サーバーからデータを取得するには、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;
または、reviverと呼ばれるJSON.parse() 関数の2番目のパラメーターをすでに使用できます。
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()を使用して関数に戻す必要があります。