JSONがオブジェクトの配列の場合の読み込み方法はこちらの記事を、JSONが1つのオブジェクトで値が配列オブジェクトになっている場合はこちらの記事も参照して下さい。
また、HTMLファイル中に記述した、JSONオブジェクトを読み込む方法についてはこちらの記事を参照してください。
JavaScriptでJSONファイルを読み込み、値を取得するコードを紹介します。
JavaScriptでJSONを扱う場合にはJSONオブジェクトを利用します。JSON形式のファイルを読み込んでオブジェクト形式でアクセスする場合は
JSONオブジェクトのparse()メソッドを呼び出します。また、JavaScriptでJSONを取得するため、XMLHttpRequestを利用します。
以下のコードを記述します。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function getJson() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var data = JSON.parse(xmlhttp.responseText);
var elem = document.getElementById("output_name");
elem.innerText = data.name;
var elem = document.getElementById("output_weight");
elem.innerText = data.weight;
var elem = document.getElementById("output_height");
elem.innerText = data.height;
var elem = document.getElementById("output_price");
elem.innerText = data.price;
var elem = document.getElementById("output_memo");
elem.innerText = data.memo;
} else {
}
}
}
xmlhttp.open("GET", "data.json");
xmlhttp.send();
}
</script>
</head>
<body>
<input id="Button_Get" type="button" value="JSON読み込み" onclick="getJson();" />
<hr />
<div>受信情報</div>
Name:<span id="output_name"></span><br />
Height:<span id="output_height"></span><br />
Weight:<span id="output_weight"></span><br />
Price:<span id="output_price"></span><br />
Memo:<span id="output_memo"></span><br />
</body>
</html>
{
"name":"Penguin Statue",
"height":20,
"weight":0.25,
"price":1500,
"memo":"かわいいペンギンの置物"
}
HTMLファイルの以下のコードで記述されたボタンをクリックするとgetJson()関数を実行し、JSONファイルの読み込みをします。
<input id="Button_Get" type="button" value="JSON読み込み" onclick="getJson();" />
function getJson() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var data = JSON.parse(xmlhttp.responseText);
var elem = document.getElementById("output_name");
elem.innerText = data.name;
var elem = document.getElementById("output_weight");
elem.innerText = data.weight;
var elem = document.getElementById("output_height");
elem.innerText = data.height;
var elem = document.getElementById("output_price");
elem.innerText = data.price;
var elem = document.getElementById("output_memo");
elem.innerText = data.memo;
} else {
}
}
}
xmlhttp.open("GET", "data.json");
xmlhttp.send();
}
createXMLHttpRequest()関数やXMLHttpRequestの説明に関してはこちらの記事を参照してください。
XMLHttpRequestによるJSONファイルの取得が成功すると以下のコード実行し、取得したJSONをオブジェクトにパースします。
パース結果のオブジェクトはdataに代入されます。
var data = JSON.parse(xmlhttp.responseText);
parseメソッドで取得したオブジェクトのプロパティにJSONの値が代入されています。
以下のコードで、HTMLファイルの要素を取得しJSONの値を表示します。
var elem = document.getElementById("output_name");
elem.innerText = data.name;
var elem = document.getElementById("output_weight");
elem.innerText = data.weight;
var elem = document.getElementById("output_height");
elem.innerText = data.height;
var elem = document.getElementById("output_price");
elem.innerText = data.price;
var elem = document.getElementById("output_memo");
elem.innerText = data.memo;
HTMLファイルを表示します。下図の画面が表示されます。
[JSON読み込み]ボタンをクリックします。JSONファイルが読み込まれ、各キーの値が表示されます。
IE(Internet Explorer)に対応する場合は、new ActiveXObject() を利用してxmlhttpオブジェクトを作成する必要があります。
以下のコードがActiveXObject を利用してxmlhttpオブジェクト作成する例です。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function getJson() {
var xmlhttp = createXMLHttpRequest(); //旧バージョンのIEなどに対応する場合
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var data = JSON.parse(xmlhttp.responseText);
var elem = document.getElementById("output_name");
elem.innerText = data.name;
var elem = document.getElementById("output_weight");
elem.innerText = data.weight;
var elem = document.getElementById("output_height");
elem.innerText = data.height;
var elem = document.getElementById("output_price");
elem.innerText = data.price;
var elem = document.getElementById("output_memo");
elem.innerText = data.memo;
} else {
}
}
}
xmlhttp.open("GET", "data.json");
xmlhttp.send();
}
function createXMLHttpRequest() {
if (window.XMLHttpRequest) { return new XMLHttpRequest() }
if (window.ActiveXObject) {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0") } catch (e) { }
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0") } catch (e) { }
try { return new ActiveXObject("Microsoft.XMLHTTP") } catch (e) { }
}
return false;
}
</script>
</head>
<body>
<input id="Button_Get" type="button" value="JSON読み込み" onclick="getJson();" />
<hr />
<div>受信情報</div>
Name:<span id="output_name"></span><br />
Height:<span id="output_height"></span><br />
Weight:<span id="output_weight"></span><br />
Price:<span id="output_price"></span><br />
Memo:<span id="output_memo"></span><br />
</body>
</html>
