楽天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人5回まで
  • 13歳以上
  • 登録:2014/03/11 20:41:12
  • 終了:2014/03/12 22:51:38
id:finnapple

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

ベストアンサー

id:TransFreeBSD No.1

TransFreeBSD回答回数665ベストアンサー獲得回数2672014/03/11 22:40:33

ポイント200pt
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でのデータ取得はスクリプトが一旦終了し、ブラウザに制御が戻った後となります。

他1件のコメントを見る
id:TransFreeBSD

返ってくるデータはitemが配列なのではなくitemsが配列ではないですか?
楽天のテストフォームだと
data.items.item[0].itemName
ではなく
data.items[0].item.itemName
になってるっぽいですが。

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文を分ける必要なければ

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とか変数を期待通りか直接確認すると捗りますよ。

2014/03/12 21:02:01
id:finnapple

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

2014/03/12 22:53:30

その他の回答(0件)

id:TransFreeBSD No.1

TransFreeBSD回答回数665ベストアンサー獲得回数2672014/03/11 22:40:33ここでベストアンサー

ポイント200pt
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でのデータ取得はスクリプトが一旦終了し、ブラウザに制御が戻った後となります。

他1件のコメントを見る
id:TransFreeBSD

返ってくるデータはitemが配列なのではなくitemsが配列ではないですか?
楽天のテストフォームだと
data.items.item[0].itemName
ではなく
data.items[0].item.itemName
になってるっぽいですが。

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文を分ける必要なければ

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とか変数を期待通りか直接確認すると捗りますよ。

2014/03/12 21:02:01
id:finnapple

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

2014/03/12 22:53:30

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません