人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

楽天APIに関する質問です。
javascript(jQuery)を使って、リクエスト&帰ってきたデータの整形をしたいのですが、うまく取得できません。
原因を教えて頂ければと思います。

■javascript
//表示件数
var max_count = 10;
//URL ※楽天アプリIDは置き換え
var url = "https://app.rakuten.co.jp/services/api/AuctionItem/Search/20130110?applicationId=楽天アプリID&format=json&sort=%2BitemPrice&keyword=";

jQuery(document).ready(function($){
$("#search_box").on('keypress', function(e) {
if(e.which == 13) {
$("#result_list ul").empty();
var key = encodeURI($(this).val());
var url_ra = url + key;
var arr_ra = [];
$.ajax(
url_ra,
{
crossDomain: true,
dataType: 'jsonp',
success: function(data) {
var item = data.Items.Item;
for (var i in item) {
arr_ra.push([
item[i].itemName,
item[i].itemPrice
]);
}
},
error: function() {
alert("エラー");
}
}
);
for(var j = 0; j < max_count; j++) {
$("#result_list ul").append('<li>' + arr_ra[j][0] + ':' + arr_ra[j][1] + '</li>');
}
}
});
});

■html
<div id="search_box"><input type="text" /></div>
<div id="result_list">
<ul>
</ul>
</div>

●質問者: 雨の日
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から

補足です。
エラー内容は「Cannot read property '0' of undefined」となっています。
また、楽天APIの仕様は以下になります。
https://webservice.rakuten.co.jp/api/auctionitemsearch/


1 ● TransFreeBSD
●200ポイント ベストアンサー
for(var j = 0; j < max_count; j++) {
 $("#result_list ul").append('<li>' + arr_ra[j][0] + ':' + arr_ra[j][1] + '</li>');
}

エラーはここで起こっていますよね?
これの位置が $.ajax() の後にありますが、このfor文の意図はデータ取得時に取得内容を表示するというものですよね?
ならばsuccess内で行うべきです。
今の位置だとajax登録後、取得前なので arr_ra は空の配列で[0]はundefinedなのでarr_ra[0][0]はエラーになります。
ajaxでのデータ取得はスクリプトが一旦終了し、ブラウザに制御が戻った後となります。


雨の日さんのコメント
ご回答ありがとうございます。 ご指摘頂いた箇所を直したのですが相変わらず「Cannot read property '0' of undefined」となってしまいます。 ちなみに下記のようの修正したのですが、何か間違えているのでしょうか? success: function(data) { var item = data.Items.Item; for (var i in item) { arr_ra.push([ item[i].itemName, item[i].itemPrice ]); } for(var j = 0; j < max_count; j++) { $("#result_list ul").append('<li>' + arr_ra[j][0] + ':' + arr_ra[j][1] + '</li>'); } },

TransFreeBSDさんのコメント
返ってくるデータはitemが配列なのではなくitemsが配列ではないですか? 楽天のテストフォームだと data.items.item[0].itemName ではなく data.items[0].item.itemName になってるっぽいですが。 >|javascript| for (var i in data.items) { arr_ra.push([ data.items[i].item.itemName, data.items[i].item.itemPrice ]); } ||< あと、max_countが決め打ちなので、これより少ないとエラーは出ます。 ただ、ある分だけは表示されると思いますが…… max_countじゃなくdata.hitsを使うと良いのでは。 というか、for文を分ける必要なければ >|javascript| for(var i = 0; i < data.hits; i++) { $("#result_list ul").append('<li>' + data.items[i].item.itemName + ':' + data.items[i].item.itemPrice + '</li>'); } ||< で良いのでは。 取得数はhitsパラメータで指定できます。 ところでブラウザはなに使ってます? ブレークポイント仕掛けてdataとか変数を期待通りか直接確認すると捗りますよ。

雨の日さんのコメント
ありがとうございます。 無事取得できました。 またブラウザはchromeを使っているのですが、ブレークポイントを仕掛けれる等知りませんでした。 使ってみたら仰るとおり捗ります! 本当にありがとうございました。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ