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

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

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

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

JavaScript

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

jQuery

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

解決済

jsonとJQueryを使ってhtmlを生成

ysfree14
ysfree14

総合スコア0

JSON

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

JavaScript

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

jQuery

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

3回答

0評価

1クリップ

1077閲覧

投稿2019/05/25 06:32

編集2022/01/12 10:58

jsonとjQueryを使ってindex.htmlにコードを生成させたいのですが、コードが生成されません。
どのようにすれば実装できますか?

json

{"release": [ { "tabName": "new-tab", "url": "url", "img": "src", "labelName": "new-label", "dateText": "5/24新作", "price": "3,132" }, { "tabName": "new-tab", "url": "url", "img": "src", "labelName": "new-label", "dateText": "5/24新作", "price": "3,132" }, { "tabName": "new-tab", "url": "url", "img": "src", "labelName": "new-label", "dateText": "5/24新作", "price": "3,132" } ]}

jQuery

$(document).ready(function(){ //HTMLを初期化 $(".json-box").html(""); //HTMLを生成 $.getJSON("json/index/index.json", function(data){ $(data.release).each(function(){ $('<div class="col1' + this.tabName + 'tab-elm" data-category="' + this.tabName + '">'+ '<a href="' + this.url + '" target="_top" class="block">'+ '<img src="' + this.img + '" alt="">'+ '</div>'+ '<div class="label-wrap">'+ '<p class="img-label' + this.labelName + '">' + this.dateText + '</p>'+ '</div>'+ '<p class="price-text">' + this.price + '</p>'+ '</a>'+ '</div>').appendTo('.json-box'); }) }) });

html

<div class="json-box"></div>

html

<div class="col1 new-tab tab-elm" data-category="new-tab"> <a href="url" target="_top" class="block"> <div class="product-img img-col1"> <img src="src" alt=""> </div> <div class="label-wrap"> <p class="img-label new-label">5/24新作</p> </div> <p class="price-text">3,132円<span>税込</span></p> </a> </div>

最後の分は実現させたいコードです。
よろしくお願い致します。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2019/05/25 07:35

「うまくいかない」だけでは何も伝わらないので起きている現象、エラーナドを確認して追記してください。
miyabi_takatsuk
miyabi_takatsuk

2019/05/25 11:23

もしかして、ローカル上だったりしますか? コンソールでエラーが出ているのであれば、それも含め、質問本文に記載をお願いします。 質問文は編集が可能です。 ローカルなのかどうか、と、エラー内容、を質問本文に追記してください。
ysfree14
ysfree14

2019/05/27 00:44

ローカル上ではありません。エラー自体は何もコンソールに出ていない状態です。 もしかしたらjsonファイル自体の読み込みがうまくできていないのかもしれません。
ysfree14
ysfree14

2019/05/27 01:08 編集

下記のようなソースで再度確認してみたのですが、Uncaught ReferenceError: data is not definedというエラーがコンソールで表示されました。 ファイルのパスなどは合っている状態です。 \$\(document\)\.ready\(function\(\){ var data = \$\.getJSON\('json/index/index\.json'\); //HTMLを生成 \$\(data\.release\)\.each\(function\(\){ \$\('<div class="col1' \+ this\.tabName \+ 'tab-elm" data-category="' \+ this\.tabName \+ '">'\+ '<a href="' \+ this\.url \+ '" target="_top" class="block">'\+ '<img src="' \+ this\.img \+ '" alt="">'\+ '</div>'\+ '<div class="label-wrap">'\+ '<p class="img-label' \+ this\.labelName \+ '">' \+ this\.dateText \+ '</p>'\+ '</div>'\+ '<p class="price-text">' \+ this\.price \+ '</p>'\+ '</a>'\+ '</div>'\)\.appendTo\('\.json-box'\); }\); }\);
miyabi_takatsuk
miyabi_takatsuk

2019/05/27 01:26 編集

当方のローカルサーバー環境にて、質問者さんの初期に記載していただいたコードで問題なく、 HTMLが生成されました。 エラーなしで、HTMLが生成されない、か・・・。 サーバーで、jsonファイルのアクセスに対して、許可していない、ないし、jsonとして返さない、などの設定がされてたりしないでしょうか? また、jQueryの読み込みが正しく行われているか、ご確認お願いします。 (といっても、この二つがなってないなら、そもそもエラー起きますが・・・一応確認)
m.ts10806
m.ts10806

2019/05/27 01:27

jQueryのバージョンとかも以外ときいてるかもしれないですしね。(質問には提示されていない環境情報の1つ) HTMLもなぜか切れて提示されているのも気になります。 DOCTYPE宣言から</html>まで全部出してもらうしかないです。
miyabi_takatsuk
miyabi_takatsuk

2019/05/27 01:39

mts10806さん>ですね。 質問者さん、どうか、HTMLの記載もお願いします! そして、コメントでいただいてるコードがなぜエラーが起きているかというと、\$\.getJSONメソッドは、非同期処理といって、処理待ちをせず次の処理ができる処理のため、 data変数の中身が入る前に、 \$\(data\.release\)\.\.\.が実行されてしまっているからかと思います。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JSON

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

JavaScript

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

jQuery

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