オブジェクトの値が配列型になっているJSONの読み込みのコードを紹介します。
概要
JSONでオブジェクトの配列の読み込みのコードを
こちらの記事で紹介しましたが、
JSONでオブジェクトの配列を扱う場合良く利用される書式は、一つのオブジェクトの値にオブジェクトの配列を値にする方法が良く利用されます。
JSON例
{
"name": "販売データ",
"data": [
{ "date" : "2020/03/04", "sales" : 185000 },
{ "date" : "2020/03/05", "sales" : 112000 },
{ "date" : "2020/03/06", "sales" : 208000 }
]
}
この記事では、JSONで1つのオブジェクトの値がオブジェクトの配列になっている場合の読み込みコードを紹介します。
プログラム
コード
<!DOCTYPE html>
<html>
<head>
<meta 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 obj = JSON.parse(xmlhttp.responseText);
var elem = document.getElementById("output");
for (i = 0; i < obj.data.length; i++) {
if (obj.data[i] != null) {
elem.innerHTML += "<div>" + obj.data[i].code + " : " + obj.data[i].name + " : " + obj.data[i].price + "</div>";
}
}
} else {
}
}
}
xmlhttp.open("GET", "data-value-array.json");
xmlhttp.send();
}
</script>
</head>
<body>
<input id="Button_Get" type="button" value="JSON読み込み" onclick="getJson();" />
<hr />
<div>受信情報</div>
<div id="output"></div>
</body>
</html>
JSONファイル
プログラムで読み込むJSONファイルです。
{
"title": "GoodsData",
"data":
[
{
"code": "F5305",
"name": "ふわふわソファー",
"price": 285000
},
{
"code": "F108",
"name": "ちいさなテーブル",
"price": 85000
},
{
"code": "F405",
"name": "シンプルチェア",
"price": 39800
},
{
"code": "F8098",
"name": "おおきなベッド",
"price": 128500
},
{
"code": "F10500",
"name": "ホワイトウッドチェスト",
"price": 580000
}
]
}
解説
JSONファイルの取得部分とparseメソッドの呼び出しに関しては
こちらの記事を参照して下さい。
パーシングされた結果のobj変数のdataに配列の値が格納されています。dataメンバ変数のlengthプロパティにアクセスすると配列長が取得できます。forループで配列の要素を順番に処理します。
var obj = JSON.parse(xmlhttp.responseText);
var elem = document.getElementById("output");
for (i = 0; i < obj.data.length; i++) {
if (obj.data[i] != null) {
elem.innerHTML += "<div>" + obj.data[i].code + " : " + obj.data[i].name + " : " + obj.data[i].price + "</div>";
}
}
実行結果
JSONファイルとHTMLファイルを同じディレクトリに配置します。WebブラウザでHTMLファイルを開きます。下図の画面が表示されます。
[JSON読み込み]ボタンをクリックします。下図の画面が表示されます。JSONファイルを取得し、パーシング処理により配列の個々のオブジェクトの値が取得できていることがわかります。
参考
ループ処理を Array.prototype.forEach, for of を利用したコードを掲載します。
function getJson() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var obj = JSON.parse(xmlhttp.responseText);
var elem = document.getElementById("output");
obj.data.forEach(function (value, index, data) {
elem.innerHTML += "<div>" + value.code + " : " + value.name + " : " + value.price + "</div>";
});
} else {
}
}
}
xmlhttp.open("GET", "data-value-array.json");
xmlhttp.send();
}
function getJson() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var obj = JSON.parse(xmlhttp.responseText);
var elem = document.getElementById("output");
for (var item of obj.data) {
elem.innerHTML += "<div>" + item.code + " : " + item.name + " : " + item.price + "</div>";
}
} else {
}
}
}
xmlhttp.open("GET", "data-value-array.json");
xmlhttp.send();
}
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2023-05-09
作成日: 2020-01-03
