質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1475閲覧

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

cofcof

総合スコア37

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/04/06 01:08

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

HTML5

1/*0001.htmlの内容*/ 2<ul id="data_block"></ul> 3 4/*0002.htmlの内容*/ 5<ul id="data_block"></ul> 6 7/*0003.htmlの内容*/ 8<ul id="data_block"></ul>

json

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

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

HTML5

1/*0001.htmlの内容*/ 2<ul id="data_block"> 3 <li><a href="abc.html"></li> 4 <li><a href="def.html"></li> 5 <li><a href="ghi.html"></li> 6</ul> 7 8/*0002.htmlの内容*/ 9<ul id="data_block"> 10 <li><a href="jkl.html"></li> 11 <li><a href="mno.html"></li> 12 <li><a href="pqr.html"></li> 13</ul> 14 15/*0003.htmlの内容*/ 16<ul id="data_block"> 17 <li><a href="stu.html"></li> 18 <li><a href="vwx.html"></li> 19 <li><a href="yz.html"></li> 20</ul>

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

jQuery

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

現状、取得したデータを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 に該当するオブジェクトを探してそれからデータを取得するという手も考えられます。

投稿2020/04/06 01:49

編集2020/04/06 02:41
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cofcof

2020/04/06 05:56

ありがとうございます、以下のような形で無事解決しました。 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>"); }); });
退会済みユーザー

退会済みユーザー

2020/04/06 06:31

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

2020/04/06 06:46

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

退会済みユーザー

2020/04/06 06:51

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問