JSON.parse()
- 前のページ JSON データ型
- 次のページ JSON シリアライズ
JSON の一般的な用途はウェブサーバーとのデータ伝送です。
ウェブサーバーからデータを受信する際には、データは常に文字列です。
通じて、 JSON.parse() データを解析し、これが JavaScript オブジェクトになります。
例 - JSON の解析
ウェブサーバーからこのテキストを受信したと想像してください：
'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'
JavaScript ファンクションを使用してください： JSON.parse() テキストを JavaScript オブジェクトに変換してください：
var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');
このテキストが JSON フォーマットで書かれていることを確認してください。さもなければ、構文エラーが発生します。
ページで 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":"ビル・ゲイツ", "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":"ビル・ゲイツ", "birth":"1955-10-28", "city":"シアトル"}';
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":"ビル・ゲイツ", "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() それらを関数に戻します。
ブラウザサポート
すべての主要ブラウザおよび最新の ECMAScript (JavaScript) スタンダードが含まれています JSON.parse() 関数：
以下のテーブルに記載の数字は、完全にサポートされている関数を指定しています： JSON.parse() 関数の最初のブラウザバージョン：
| はい | 8.0 | 3.5 | 4.0 | 10.0 |
より古いブラウザ用には、以下のアドレスに JavaScript ライブラリがあります：
- 前のページ JSON データ型
- 次のページ JSON シリアライズ
