API Google Book - PullRequest
Новая
       16

API Google Book

0 голосов
/ 27 ноября 2018

Я хочу перебрать массив элементов, предоставляемый API книг Google, и распечатать результат внутри div, но я почему-то не могу этого сделать.Это то, что я написал до сих пор. 

<body>
    <div class="main-body">
        <form id="form">
        <div class="form-group">
            <label for="usr">Enter Book Name</label>
            <input type="search" class="form-control" id="search-text">
        </div>
        <div class="search-button">
            <button onclick="function2();" type="button" id="search-button" class="btn btn-default">Search</button>
        </div>
        </form>
        <div id="result">
            <!--something seems wrong here-->
        <h3 class="title"></h3>
        <h4 class="author"></h4>

        <img src="" alt="" class="thumbnail">
        </div>

    </div>
    <script>
     function function2(){
         var result = document.getElementById('search-text').value;
         $.ajax({
            url: "https://www.googleapis.com/books/v1/volumes?q="+result,
            type: 'GET',
            dataType: 'json', // added data type
            success: handleResponse
        });
        function handleResponse(res){
            $.each(res.items,function(i,item){
                var title = item.volumeInfo.title,
                    author = item.volumeInfo.authors[0],
                    thumb = item.volumeInfo.imageLinks.thumbnail;
            <!--want to iterate over each element in items array and print it-->
            $('.title').text(title);
            $('.author').text(author);
            $('.thumbnail').attr('src',thumb);
        })
        } 
       }
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

1 Ответ

0 голосов
/ 27 ноября 2018

Ваш текущий код заменяет предыдущие данные текущими данными на каждой итерации.Самый простой способ сделать то, что вы хотите, - это создать новые элементы и добавить их к вашему «результату» div, как показано ниже.

Я бы также порекомендовал проверить данные.Некоторые запросы, которые я тестировал с возвращенными книгами без обложек или авторов. 

function function2() {
  var result = document.getElementById('search-text').value;
  $.ajax({
    url: "https://www.googleapis.com/books/v1/volumes?q=" + result,
    type: 'GET',
    dataType: 'json', // added data type
    success: handleResponse
  });

  function handleResponse(res) {
    $.each(res.items, function(i, item) {
        var title = item.volumeInfo.title,
          author = item.volumeInfo.authors[0],
          thumb = item.volumeInfo.imageLinks.thumbnail;
        var elTitle = $('<h3 class="title"></h3>').html(title),
          elAuthor = $('<h4 class="author"></h4>').html(author),
          elThumb = $('<img src="" alt="" class="thumbnail">').attr('src', thumb);
        $('#result').append(elTitle, elAuthor, elThumb);
    })
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="main-body">
    <form id="form">
      <div class="form-group">
        <label for="usr">Enter Book Name</label>
        <input type="search" class="form-control" id="search-text">
      </div>
      <div class="search-button">
        <button onclick="function2();" type="button" id="search-button" class="btn btn-default">Search</button>
      </div>
    </form>
    <div id="result">
    </div>
  </div>
</body>
...