楽天APIのデータをjqueryのgetJSONで呼び出して、その呼び

質問

楽天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?developerId=a85598e3698a4fec0b48db3036df0c6e&operation=ItemSearch&version=2009-04-15&keyword=%E3%80%90%E5%BE%A1%E4%B8%AD%E5%85%832010%E5%A4%8F%E3%80%91",
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

yyr446 · ベストアンサー

楽天の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>");
ですね。最後の＜/ｌｉ＞がないと、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>");
ですね。最後の＜/ｌｉ＞がないと、jcarouselliteはうまくいきません。

これは、初歩も初歩のミスですね・・・。
すごい恥ずかしいです。

＞＞後は、PROXYとなるPHPとかを別途作って、そいつに向かって、
エンコードした楽天へのリクエストULIをGETするURLを
$.getJSON()で呼んでやれば、そのまま出来ます。

ありがとうございました！！
いつも、いただくご助言で、本当に助かっております。

回答No.2

yyr446

サーバーにアップロードしたところ、全く動作をしてくれませんでした。

＝＞それって、クロスドメインアクセスじゃないですか？
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

yyr446

検証してませんが、おそらく$.getJSON(）は非同期で実行されてる
はずですから、コールバック関数が実行されるより前に$().jCarouselLite
が実行されてんではないでしょうか。
$().jCarouselLiteもコールバック関数の中に入れてみてはどうでしょう

お礼

早速の回答、いつも、誠にありがとうございます。

＞＞$().jCarouselLiteもコールバック関数の中に入れてみてはどうでしょう

についてですが、具体的にどの様に記述すると上手くいきますか、お教え願えますでしょうか。

ちなみに、

$.getJSON(
"http://api.rakuten.co.jp/rws/3.0/json?developerId=a85598e3698a4fec0b48db3036df0c6e&operation=ItemSearch&version=2009-04-15&keyword=%E3%80%90%E5%BE%A1%E4%B8%AD%E5%85%832010%E5%A4%8F%E3%80%91",
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を
読み込むタイミングが悪いのでしょうか。

お手数をお掛けしますが、何卒宜しくお願いいたします。
失礼します。