![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
楽天APIのデータをjqueryのgetJSONで呼び出して、その呼び出したデータをjcarouselliteを使って、カルーセルで表示したいのですが、上手く表示されません。
どの様にしたら良いでしょうか、助言をいただけるととてもありがたいです。
なお、記述はこの様になっております。
ちなみに、参照ページはhttp://www.rakuten.ne.jp/gold/giftland/ocyuugen/です。
■html部分■
<div class="carousel">
<button class="prev">戻る</button>
<ul id="jCarouselLite">
</ul>
<button class="next">次へ</button>
</div>
■javascript部分■
//楽天APIの呼び出し
$.getJSON(
"http://api.rakuten.co.jp/rws/3.0/json?developerI …
function(data, status) {
var items = data.Body.ItemSearch.Items.Item;
$.each(items,function(i){
var img = items[i].mediumImageUrl;
var price = items[i].itemPrice;
var url = items[i].itemUrl;
var name = items[i].itemName;
$(".carousel ul").append("<li><a href='" + url + "'><img src='" + img + "'><span>"+ price + "円</span></a><li>");
});
}
);
//jcarouselliteの設定での記述
$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
何卒、宜しくお願いいたします。
No.3ベストアンサー
- 回答日時:
楽天のJSONをダウンロードして、自サイトに置いた上でNo1のコードで
実験したら、jcarouselliteもうまくいきました。
ご提示の、
$(".carousel ul").append("<li><a href='" + url + "'><img src='" + img + "'><span>"+ price + "円</span></a><li>");
は
$(".carousel ul").append("<li><a href='" + url + "'><img src='" + img + "'><span>"+ price + "円</span></a></li>");
ですね。最後の</li>がないと、jcarouselliteはうまくいきません。
後は、PROXYとなるPHPとかを別途作って、そいつに向かって、
エンコードした楽天へのリクエストULIをGETするURLを
$.getJSON()で呼んでやれば、そのまま出来ます。
>>楽天のJSONをダウンロードして、自サイトに置いた上でNo1のコードで
実験したら、jcarouselliteもうまくいきました。
わざわざ、テストまでしていただきまして、本当にありがとうございます!!!
申し訳ない限りです~。
>>$(".carousel ul").append("<li><a href='" + url + "'><img src='" + img + "'><span>"+ price + "円</span></a><li>");
は
$(".carousel ul").append("<li><a href='" + url + "'><img src='" + img + "'><span>"+ price + "円</span></a></li>");
ですね。最後の</li>がないと、jcarouselliteはうまくいきません。
これは、初歩も初歩のミスですね・・・。
すごい恥ずかしいです。
>>後は、PROXYとなるPHPとかを別途作って、そいつに向かって、
エンコードした楽天へのリクエストULIをGETするURLを
$.getJSON()で呼んでやれば、そのまま出来ます。
ありがとうございました!!
いつも、いただくご助言で、本当に助かっております。
No.2
- 回答日時:
サーバーにアップロードしたところ、全く動作をしてくれませんでした。
=>それって、クロスドメインアクセスじゃないですか?
JSONじゃなくてJSONPになってないと取得できないですよ。
「楽天API」はよく知らないんですけど、JSONの他にJSONPを返してくれる
パラメーターとか無いんですか?
よそのサイトからJSONを取り込むには、どうしてもサーバーサイドのプログラム
が必用ですよ。たとえjQueryといえども。
(※JSONPならjQueryだけで出来ます。)
・JSONPというのは、しごく大雑把に説明すると
<script>タグが外部サイトのソースを取り込めるのを利用して、
<script src="リクエストURL"></script>
のタグを動的に生成して、中身に
callback_func({JSONデータ});
がセットされるという物です。jQuery使うとcallback_funcの名前を
気にせず、$ajax()内の匿名functionでjsonにアクセス出来るという
仕組みです。
サーバーにアップロードしたところ、全く動作をしてくれませんでした。
>>=>それって、クロスドメインアクセスじゃないですか?
なるほど!なるほどです。
まだまだ全然理解せずに使っていますが、何とか、サーバー上でも
動くようになってくれました!!
毎度、本当にありがとうございます。
>> JSONじゃなくてJSONPになってないと取得できないですよ。
>> 「楽天API」はよく知らないんですけど、JSONの他にJSONPを返してくれる
>> パラメーターとか無いんですか?
>> よそのサイトからJSONを取り込むには、どうしてもサーバーサイドのプログラム
>> が必用ですよ。たとえjQueryといえども。
>> (※JSONPならjQueryだけで出来ます。)
>>
>> ・JSONPというのは、しごく大雑把に説明すると
>> <script>タグが外部サイトのソースを取り込めるのを利用して、
>> <script src="リクエストURL"></script>
>> のタグを動的に生成して、中身に
>> callback_func({JSONデータ});
>> がセットされるという物です。jQuery使うとcallback_funcの名前を
>> 気にせず、$ajax()内の匿名functionでjsonにアクセス出来るという
>> 仕組みです。
ここら辺の事をちゃんと理解して使っていけるように頑張りたいと思います。
本当にありがとうございました。
No.1
- 回答日時:
検証してませんが、おそらく$.getJSON()は非同期で実行されてる
はずですから、コールバック関数が実行されるより前に$().jCarouselLite
が実行されてんではないでしょうか。
$().jCarouselLiteもコールバック関数の中に入れてみてはどうでしょう
早速の回答、いつも、誠にありがとうございます。
>>$().jCarouselLiteもコールバック関数の中に入れてみてはどうでしょう
についてですが、具体的にどの様に記述すると上手くいきますか、お教え願えますでしょうか。
ちなみに、
$.getJSON(
"http://api.rakuten.co.jp/rws/3.0/json?developerI …
function(data, status) {
var items = data.Body.ItemSearch.Items.Item;
$.each(items,function(i){
var img = items[i].mediumImageUrl;
var price = items[i].itemPrice;
var url = items[i].itemUrl;
var name = items[i].itemName;
$(".carousel ul").append("<li><a href='" + url + "'><img src='" + img + "'><span>"+ price + "円</span></a><li>");
});
$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
}
);
として、コールバック関数の中に入れてみた所、ローカルでは上手く動くのですが、
サーバーにアップロードしたところ、全く動作をしてくれませんでした。
これは、以前にご指導いただきましたツールチップの時の様に、$().jCarouselLiteを
読み込むタイミングが悪いのでしょうか。
お手数をお掛けしますが、何卒宜しくお願いいたします。
失礼します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショーの画像にリンク...
-
jQueryのclickイベントハンドラ
-
画像にマウスを乗せた時のJava ...
-
Dreamweaver上とデバイスプレビ...
-
エンドロールを枠の中で表示す...
-
Flickrのような綺麗なサムネイ...
-
キャラクターがぴょこんと飛び...
-
jspでcssが読み込めない
-
スクロール可能なチェックボックス
-
jQueryでネスト構造の<li>がク...
-
1枚の画像をクリックすると複数...
-
401エラードキュメントを401.ht...
-
変数名をどのようにつけるのが...
-
HTML id名とjavascript変数名
-
ディレクトリ内画像表示
-
【javascript で動的に a タグ...
-
オンマウスで、画像切り替え+...
-
IplImageをPictureBoxへ表示が...
-
PC設定に依存しない曜日判定JS...
-
特定の画像を非表示にする方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
キャラクターがぴょこんと飛び...
-
【jQuery】2分割レイアウトで、...
-
スライドショー「Skitter」をカ...
-
スライドショーの画像にリンク...
-
画像をフェードアウト&フェー...
-
Dreamweaver上とデバイスプレビ...
-
アコーディオンメニューが開い...
-
神経衰弱 順番に裏返し
-
楽天APIのデータをjqueryのgetJ...
-
swiper.jsについて
-
エンドロールを枠の中で表示す...
-
順番にクラスをつけていく方法
-
画像にマウスを乗せた時のJava ...
-
bxsliderでスライドショーの間...
-
複数の要素へ appendchild でき...
-
jQueryでタブ、スライダーを使...
-
SimplyScrollについて
-
bxSliderのランダム表示について
-
javascript 神経衰弱
おすすめ情報