jsonデータから取得したデータを複数のhtmlファイルに出力したい

Question

jsonデータから取得した値を複数のhtmlファイルに出力したいと思っています。
jsonデータはネストした形で各ページのデータが記述されています。
具体的にはjsonデータの中の一つ目の値に各ページ名を記述して、ページ毎にそれぞれ二つ目以降の値を記述していきたいと考えています。
具体的には以下のような形になっています。

/*0001.htmlの内容*/
<ul id="data_block"></ul>

/*0002.htmlの内容*/
<ul id="data_block"></ul>

/*0003.htmlの内容*/
<ul id="data_block"></ul>

[
{"ID":"0001","data1":"abc.png","data2":"def.png","data3":"ghi.png"},
{"ID":"0002","data1":"jkl.png","data2":"mno.png","data3":"pqr.png"},
{"ID":"0003","data1":"stu.png","data2":"vwx.png","data3":"yz.png"}
]

このIDが各htmlファイルの名前に対応しており、#data_block内にそれぞれの値を出力したいと考えています。
出力したhtmlファイルは以下のような形にしたいです。

/*0001.htmlの内容*/
<ul id="data_block">
	<li><a href="abc.html"></li>
	<li><a href="def.html"></li>
	<li><a href="ghi.html"></li>
</ul>

/*0002.htmlの内容*/
<ul id="data_block">
	<li><a href="jkl.html"></li>
	<li><a href="mno.html"></li>
	<li><a href="pqr.html"></li>
</ul>

/*0003.htmlの内容*/
<ul id="data_block">
	<li><a href="stu.html"></li>
	<li><a href="vwx.html"></li>
	<li><a href="yz.html"></li>
</ul>

現状、取得したデータを1ページ目に出力することはできたのですが、ページ毎にそれぞれ変えていく方法がわかりません。

var result;
$(document).ready(function () {

	$.getJSON("data.json", function (data) {//data.jsonはjsonファイルの名前です
		result = data;
		$("#data_block").append("<li><a href='" + result[0].data1 + "'>リンク1</a></li>");
		$("#data_block").append("<li><a href='" + result[0].data2 + "'>リンク2</a></li>");
		$("#data_block").append("<li><a href='" + result[0].data3 + "'>リンク3</a></li>");
		
	});
});

result[0]の部分をfor文とかで書き換えていけば良いと思うのですが、jsonから取得したIDの値でそれぞれページ毎に異なる内容を書き出す具体的な方法を教えていただけるとありがたいです。
お手数をおかけしますがよろしくお願いいたします。

Answer 1

現状、取得したデータを1ページ目に出力することはできたのですが、ページ毎にそれぞれ変えていく方法がわかりません。

質問に書いてある jQuery のコードは 1 ページ目にしかないが、それで 2 ページ目、3 ページ目も操作したいということですか？

ということであれば、それはできない話なので、2 ページ目、3 ページ目にも同じ jQuery のコードをコピーして、result[0] を result[1], result[2] に書き直すぐらいしか適当な手はなさそうです。

【追記】

result[0], result[1], result[2] というようにハードコーディングするのはイヤということであれば・・・

id は必ず当該ページの url の xxxx.html の xxxx になっているのであれば、jQuery のコードで location.href からページの URL を取得し、それから正規表現などを使って xxxx の部分を切り出し、配列 result から xxxx に該当するオブジェクトを探してそれからデータを取得するという手も考えられます。

Comments

[cofcof]

ありがとうございます、以下のような形で無事解決しました。
jsonからIDを取得して配列に入れるのではなく、urlから取得するのですね。
ということはIDはなくても良いということでしょうか。
----------------------------------
var result;
var url;
var no;
var countno;
url = $(location).attr('href');
no = url.replace(/[^0-9]/g, '');
countno = Number(no);
countno = countno - 1;
$(document).ready(function () {
$.getJSON("data.json", function (data) {
result = data;
$("#data_block").append("<li><a href='" + result[countno].data1 + "'>リンク1</a></li>");
$("#data_block").append("<li><a href='" + result[countno].data2 + "'>リンク2</a></li>");
$("#data_block").append("<li><a href='" + result[countno].data3 + "'>リンク3</a></li>");
});
});

[退会済みユーザー]

> ということはIDはなくても良いということでしょうか。

そうですね、上のコメントに書かれたようにするなら ID はなくても大丈夫ですね。ただ、当該ページのデータが配列の要素の何番目になるのかが変わってくるようなことがあるでしょうから、xxxx.html の xxxx で配列の各要素の ID を検索して、一致する要素のデータを使うということにした方が良いかもしれません。

[cofcof]

なるほど、その方が間違いなさそうですね。
検索あたりのやり方が、イマイチ想像つかないのでもう少しだけ詳しくお伺いしても良いでしょうか？

[退会済みユーザー]

for ループで result[i].id == xxxx になる要素を探してはいかがでしょう？