JSONの一般的な使い方は、Webサーバとの間でデータを交換することです。

Webサーバからのデータを受信するときは、データは常に文字列です。

JSON.parse()でデータをパースすると、データはJavaScriptオブジェクトになります。

例 - JSONのパース

テキストをJavaScriptオブジェクトに変換するには、JavaScript関数JSON.parse()を使用します：

テキストがJSON形式で書かれていることを確認してください。JSON形式以外の場合は、構文エラーが発生します。

例

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>

Try it Yourself »

サーバからの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();

Try it Yourself »

json_demo.txtを見てください

JSONとしての配列

配列から派生したJSONでJSON.parse()を使用する場合、メソッドはJavaScriptオブジェクトの代わりにJavaScrip配列を返します。

例

サーバから返された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();

Try it Yourself »

json_demo_array.txtを見てください

例外

日付のパース

日付を含める必要がある場合は、文字列として記述します。

例

文字列を日付に変換する：

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text) {
obj.birth = new Date(obj.birth);

document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Try it Yourself »

または、reviverというJSON.parse()関数の2番目のパラメータを使用できます。

reviver パラメータは、値を返す前に各プロパティをチェックする関数です。

例

reviver 関数を使用して、文字列を日付に変換します：

Try it Yourself »

パース関数

関数を含める必要がある場合は、関数を文字列として記述します。

例

文字列を関数に変換する：

var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text) {
obj.age = eval("(" + obj.age + ")");

document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();

Try it Yourself »

JSONで関数を使用しないでください。関数がスコープを失い、関数に変換するためにeval()を使用しなければなりません。

ブラウザ・サポート

JSON.parse()関数は、すべての主要なブラウザおよび最新のECMAScript（JavaScript）標準に含まれています：