JSON.parse()
JSONは通常、サーバー側とのデータ交換に使用されます。
サーバーデータを受信する際は、通常は文字列です。
JSON.parse() メソッドを使用して、データをJavaScriptオブジェクトに変換できます。
構文
JSON.parse(text[, reviver])
パラメータの説明：
- text:必須。有効なJSON文字列。
- reviver:オプション。変換結果の関数。オブジェクトの各メンバーに対してこの関数が呼び出されます。
JSON 解析の例
例えば、サーバーから以下のデータを受信したとします：
{ "name":"サンプル", "alexa":10000, "site":"www.example.com" }
JSON.parse() メソッドを使用して上記のデータを処理し、JavaScriptオブジェクトに変換します：
var obj = JSON.parse('{ "name":"サンプル", "alexa":10000, "site":"www.example.com" }');
解析する前に、データが標準のJSON形式であることを確認してください。そうしないと解析エラーが発生します。
オンラインツールで確認できます：https://www.jyshare.com/front-end/53。
解析が完了すると、WebページでJSONデータを使用できます：
例
<p id="demo"></p>
<script>
var obj = JSON.parse('{ "name":"サンプル", "alexa":10000, "site":"www.example.com" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>
試してみる »
サーバーからJSONデータを受信する
AJAXを使用してサーバーからJSONデータをリクエストし、JavaScriptオブジェクトに解析できます。
例
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", "/try/ajax/json_demo.txt", true);
xmlhttp.send();
試してみる »
サーバーデータを表示：
サーバーから配列のJSONデータを受信する
サーバーから受信したJSONデータが配列の場合、JSON.parse はそれをJavaScript配列に変換します：
例
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myArr = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myArr[1];
}
};
xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true);
xmlhttp.send();
試してみる »
サーバーデータを表示：
例外
データの解析
JSONはDateオブジェクトを保存できません。
Dateオブジェクトを保存する必要がある場合は、文字列に変換する必要があります。
その後、文字列をDateオブジェクトに変換します。
例
var text = '{ "name":"サンプル", "initDate":"2013-12-14", "site":"www.example.com"}';
var obj = JSON.parse(text);
obj.initDate = new Date(obj.initDate);
document.getElementById("demo").innerHTML = obj.name + "日付を作成:" + obj.initDate;
試してみる »
JSON.parse の2番目のパラメータ reviver（変換結果の関数）を使用できます。オブジェクトの各メンバーに対してこの関数が呼び出されます。
例
var text = '{ "name":"サンプル", "initDate":"2013-12-14", "site":"www.example.com"}';
var obj = JSON.parse(text, function (key, value) {
if (key == "initDate") {
return new Date(value);
} else {
return value;
}});
document.getElementById("demo").innerHTML = obj.name + "日付を作成：" + obj.initDate;
試してみる »
関数の解析
JSONは関数を含めることを許可していませんが、関数を文字列として保存し、後で文字列を関数に変換することができます。
例
var text = '{ "name":"サンプル", "alexa":"function () {return 10000;}", "site":"www.example.com"}';
var obj = JSON.parse(text);
obj.alexa = eval("(" + obj.alexa + ")");
document.getElementById("demo").innerHTML = obj.name + "Alexaランキング：" + obj.alexa();
試してみる »
JSONでの関数の使用はお勧めしません。
ブラウザサポート
主流ブラウザはすべてJSON.parse()関数をサポートしています：
旧バージョンのブラウザでは、サードパーティのライブラリを使用して対応できます：https://github.com/douglascrockford/JSON-js
その他の拡張