jsonとJQueryを使ってhtmlを生成

Question

jsonとjQueryを使ってindex.htmlにコードを生成させたいのですが、コードが生成されません。
ローカル上ではなく、同一ドメインのサーバーへ上げて確認しています。
どのようにすれば実装できますか？

{"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"
}

]}

$(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');
	})
	})
	});

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

<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>

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

Comments

[m.ts10806]

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

[miyabi_pudding]

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

[ysfree14]

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

[ysfree14]

下記のようなソースで再度確認してみたのですが、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_pudding]

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

[m.ts10806]

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

[miyabi_pudding]

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

Answer 1

ローカル領域かどうかの確認に対して、お答えいただいておりませんが、
ひとまず、今回のajaxを使用しての、json取得は、ローカルでは動きません。
厳密には、CORSによって、ローカルファイルに対してのajax通信には、ブラウザ側で制限されているからです。
（ローカルでなくても、別ドメインに対してのajax通信も同様に制限がかかる）
これは、セキュリティの問題です。

よって、ローカルにおいては、ブラウザを起動するときにローカルファイルにアクセスできるよう、オプション起動するか、
ローカルサーバーを立て、起動し、同ドメイン上という形で行うしかありません。
（Webサーバーで、別ドメインのファイルに対してajaxするなら、お互いのサーバーサイドで、通信することを許可しなければならない）

ただし、それで質問者さんが書いたスクリプトが動くかどうかはわかりません。
なぜなら、今回のご質問の内容では、この回答が限界だからです。
（多分、ajax通信さえうまく言ってれば、動くような気がします。jQuery読み込んでないとかだったら、それもエラー内容記載いただかないとわかりません）
これ以上の正確な回答を得たいのならば、
コンソールエラー内容の記載と、ローカルなのか、ローカルサーバーなのか、Webサーバーなのかの、記載をお願いいたします。

Comments

[hentaiman]

エスパー回答見たらなんかうまく行かない理由と自分の回答が伝わらない理由に納得した

[miyabi_pudding]

w
エラー内容記載してくれれば一発で状況わかるんですけどね。
ここまで考えねばならんのか、っていつも思います。

[m.ts10806]

それはもうやはり環境含めて他人が完全再現できる情報を提供してもらうしかないですね。

[miyabi_pudding]

まいった、私のサーバー環境で、問題なくHTML生成されてしまった。
mts10806さんの言う通り、環境含めて情報提供してもらうしかないですね・・・。

Answer 2

楽天GOLD上でテストを行っていたのですが、そこでなぜかパスがおかしくなっていまして
JSONの取得を相対パスから絶対パスに変更することで解決できました。

ありがとうございました。

Answer 3

ただの構文ミスのようですが

//dataは直接jsonを入れておくとして

//    $.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');
//    })
//    })←ひとつ余分
    });

Comments

[ysfree14]

ご回答ありがとうございます。
一つ余分のところを消すと、Uncaught SyntaxError: Unexpected end of inputのエラーが表示されてしまいます。

dateは直接jsonをいれておくということは、どういうことでしょうか？

[hentaiman]

var data = ここで質問文に書いてあるjsonを代入
単にajaxで試す環境用意するのがだるかったので
そして構文エラーになります？こっちはajaxの部分以外丸々コピーしてカッコ揃えたら動いたけどな～

[ysfree14]

下記のようなソースを入れてみたのですが、コンソールに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');
});

});

[hentaiman]

> var data = $.getJSON('json/index/index.json');
そういう事ではないんです。
jsonのデータが本当に正しく返されている前提で以下のように直接変数にいれたんです。
======
var data = {"release": [
{
"tabName": "new-tab",
"url": "url",
～略～
"price": "3,132"
}
]}
======

コード自体は質問文にあるようなコールバックの書き方で正解です。

もしも
var data = $.getJSON('json/index/index.json');
こういう書き方をするなら、optionパラメーターのasyncをfalseにしないといけません。
非同期通信をoffにしないと、dataに中身が入る前に次の処理のeachループに行ってしまうのでエラーになります。
（パラメーターの詳細はAPIドキュメントみてね）

まずは
$(data.release).each(function(){から}までの処理を全部取っちゃって、dataをconsole.logで確認してみてはどうでしょう？
dataが無いならajax周りを見直しましょう