２０件まで表示したい

現在、ajaxを使って２０件の表示をしたいのですが、データがなかったりうまくできません
doneメソッドを使ってやっているのですがうまくできないため、お力をお借りしたいです

  var btn = $('.search__btn');
  var lists = $('.lists');

  btn.on('click', function() {
    var searchword = $('.search__text__input').val();
    request(searchword);
    // console.log(searchword);
  })

  //Ajaxのデータ
  function request(keyword) {
    $.ajax({
      url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522',
      type: 'GET',
      datatype: 'json',
      data: {
        keyword: keyword,
        applicationId: '1019399324990976605',
        booksGenreId: '001',
        page: 1,
        hits: 20
      }
    })
    .done(function(search) {
      // console.log(search)
      list(search);
    })
    .fail(function(muri){
      massage(muri)
    })
  }

  function list(mate) {
    console.log(mate)
    mate.Items.forEach(function(item) {
      var template =
        '<li class="lists__item">' +
          '<div class="lists__item__inner">' +
            '<a href="'+ item.Item.itemUrl +'"class="lists__item__link" target="_blank">' +
              '<img src="'+ item.Item.mediumImageUrl +'" 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').html(template);
    });
  }

<!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>
<script>

行動規範の内容に同意します

回答2件

ベストアンサー

JavaScript
1      $('.lists').html(template);

ループ内で上書きしているため、最後のデータしか表示されないのではないでしょうか？
HTMLがないのでどうすればいいかは言えませんが。

投稿2017/12/20 09:15

x_x

総合スコア13749

keywordがチャンとわたってないのでは？
dataの中からkeywordを除いて一度ためしてみてください
20件hitするみたいです

投稿2017/12/20 09:14

yambejp

総合スコア114808

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

２０件まで表示したい

関連した質問