LoginSignup
Qrara
@Qrara (Qrara)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

JSで楽天ブックスの総合検索APIを作ったが動かない。。

解決したいこと

jQueryを勉強しています。
APIを使って検索機能を作っているのですが、アプリケーションIDを発行して実際に動かしてみるとエラーが出てしまいます。

https://qiita.com/takuyahori/items/8b80bf0c28da37bd1112
こちらを参考にして作りました。

発生している問題・エラー

↓コンソールで確認
GET https://app.rakuten.co.jp/services/api/Kobo/EbookSearch/20170426?applicationId=1065320682399172319&keyWord=f&format=json&bookGenreId=001&page=1&hits=20 400 (400)

↓デベロッパーツールのネットワークに出ていたエラー内容
error
: 
"wrong_parameter"
error_description
: 
"keyword or title or itemNumber or author or publisherName or koboGenreId is essential parameter and must be set"
↓翻訳語
keyword または title または itemNumber または author または publisherName または koboGenreId は必須パラメーターであり、設定する必要があります

これが良く分かりません。。。

該当するソースコード

<div class="wrap">
  <div class="container">
    <div class="header">
      <p class="header__title">Search Books!</p>
    </div>
    <div class="search">
      <div class="search__text">
        <input type="text" id="js-search-word" class="search__text__input" value="" placeholder="検索する">
      </div>
      <button id="js-search-button" class="search__btn">検索する</button>
    </div>
    <ul class="lists"></ul>
  </div>
</div>
<script defer>
window.addEventListener( 'load', function(){

  let pageNum = 0;
  let prevWord = "";
  $("#js-search-button").on("click", function() {
    pageNum = pageNum+1
    let keyWord = $("#js-search-word").val();
    if(prevWord !== keyWord){
      pageNum = 1;
      $(".lists").empty();
      prevWord = keyWord;
    };
  
    $.ajax({
      type: "GET",
      url: "https://app.rakuten.co.jp/services/api/Kobo/EbookSearch/20170426",
      data: {
        applicationId: "1065320682399172319",
        keyWord: keyWord,
        format: "json",
        bookGenreId: "001",
        page: pageNum,
        hits: 20,
      }

    }).done(function(data) {
      if(data.count > 0) {
        $(".comment").remove();
        let list = "";
        for (let i=0; i<data.Items.length; i++) {
          list += '<li class=lists__item>' +
          '<div class=lists__item__inner>' +
          '<a href=${data.Items[i].Item.itemUrl} class=lists__item__link target=_blank>' +
          '<img src=${data.Items[i].Item.largeImageUrl} class=lists__item__img alt>' +
          '<p class=lists__item__detail>作品名: ${data.Items[i].Item.title}</p>' +
          '<P class=lists__item__detail>作者  : ${data.Items[i].Item.author}</p>' +
          '<p class=lists__item__detail>出版社: ${data.Items[i].Item.publisherName}</p>' + '</a>' + '</div>' + '/li>';
        };
        $(".lists").prepend(list);
      } else {
        $(".commit").remove();
        $(",lists").before("<div class='commit'</div>");
        $(".comment").html("<p class='message'>検索結果が見つかりませんでした。<br>別のキーワードで検索してください。 </p>");
      };
    });
  });
}, false);
</script>

自分で試したこと

↓楽天のAPI詳細から持ってきました。

    &keyword=%97%BF%97%9D
    &koboGenreId=101
    &sort=%2BitemPrice

こちらを↓に使うことはあるのかと思い使ってみてもエラーになります。

      data: {
        applicationId: "1065320682399172319",
        keyWord: keyWord,
        format: "json",
        bookGenreId: "001",
        page: pageNum,
        hits: 20,
      }

自分なりに色々いじってみたのですが、上手くいきませんでした。
分かる方ぜひ教えてください。

0

1Answer

 data: {
        applicationId: "1065320682399172319",
        keyWord: keyWord,

パラメータ名 keyword は大文字小文字を区別しそうな気がします。↑を keyword: keyWord にして試してみてください。

2Like

Comments

  1. @Qrara

    Questioner
    それでした!!
    解決しました!ありがとうございます!!

Your answer might help someone💌