前提・実現したいこと
検索ボックスにキーワードを入れ、検索ボタンを押した時に、楽天ブックスAPIからデータを取得し20件ずつ一覧に表示したいです。
さらに、同じワードで検索した時、最初の20件は削除され、次の新しい20件が表示されるようにしたいです。
初心者なので簡単なミスをしてしまっているかもしれませんが、ご指導のほどよろしくお願い致します。
発生している問題・エラーメッセージ
検索をしても結果が0件になってしまいます。データがそもそも取得できていないのかもしれません。
該当のソースコード
<script> $(function() { $('#js-search-button').on('click',function() { var searchword = $('#js-search-word').val(); console.log(searchword); $.ajax({ url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522', type: 'GET', datatype: 'json', data: { applicationId: '', booksGenreId: '001', size: '0', hits: '20', page: '1', keyword: 'searchword', } }) .done(function(data) { console.log(data.hits); if(data.count > 0) { $("ul").empty(); $.each(data.Items,function(i,item) { console.log(data.Items); var list = $('<li class = "lists__item">' + '<div class="lists__item__inner">' + '<a href="' + item.Item.itemUrl + '"class="lists__item__link" target="_blank">' + '<img src="' + item.Item.largeImageUrl + '" class="lists__item__img" alt="' + item.Item.title + '">' + '<p class="lists__item__detail">作品名: ' + item.Item.title + '</p>' + '<p class="lists__item__detail">作者 : ' + item.Item.author + '</p>' + '<p class="lists__item__detail">出版社: ' + item.Item.publisherName + '</p>' + '</a>' + '</div>' + '</li>'); $('.lists').prepend(list); }) } else if(data.hits === 0) { $('.lists').after('<div class = "coment"></div>') coment = $('.coment'); coment.html('<p class = "message">検索結果が0件でした。<br>キーワードを変えて検索してください。</p>'); } }).fail(function() { $('.lists').after('<div class = "datacoment"></div>') datacoment = $('.datacoment'); datacoment.html('<p class = "failmessage">データ通信できませんでした。<br>接続を確認してください。</p>'); }) }); }); </script>
試したこと
console.logで確認したところ、data.hitsは0。searchwordはサッカー。でした。
dataのkeywordの部分に例(サッカー)と入れて検索するとサッカーの検索結果が表示されました。
keywordの部分にサッカーと入れた時のconsole.log(data.Items)はきちんと表示されていました。
補足情報(FW/ツールのバージョンなど)
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>jQuery</title> <link rel="stylesheet" href="../../common/css/reset.css"> <link rel="stylesheet" href="../../common/css/base.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <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" placeholder="検索する"> </div> <button id="js-search-button" class="search__btn">検索する</button> </div> <ul class="lists"></ul> </div> </div> <script src="../../common/js/jquery.js"></script>回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/24 12:00
2019/03/24 12:04
2019/03/24 12:10
2019/03/24 12:18
2019/03/24 12:50
2019/03/26 20:20
2019/03/26 20:24
2019/03/27 03:02
2019/03/27 07:15
2019/03/27 07:15
2019/03/27 07:59
2019/03/27 08:37