オブジェクトの値がオブジェクトの配列のJSONの読み込み
オブジェクトの値が配列のJSONの読み込みのコードを紹介します。
概要
JSONでオブジェクトの配列の読み込みのコードを
こちらの記事で紹介しました。
JSONでオブジェクトの配列を扱う場合の書式の一つとして、一つのオブジェクトの値にオブジェクトの配列を値として記述する方式があります。
この記事では、JSONで1つのオブジェクトの値がオブジェクトの配列になっている場合の読み込みコードを紹介します。
JSON例
以下に例を示します。
{
"name": "販売データ",
"data": [
{ "date" : "2020/03/04", "sales" : 185000 },
{ "date" : "2020/03/05", "sales" : 112000 },
{ "date" : "2020/03/06", "sales" : 208000 }
]
}
メモ
- JSONの配列の書式についてはこちらの記事を参照してください。
- JSONのオブジェクトの配列の書式についてはこちらの記事を参照してください。
プログラム
コード
<!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を愛用
