Блог

Главная - Вопросы по программированию - Результаты поиска книг Не отображаются в jQuery

Результаты поиска книг Не отображаются в jQuery

#javascript #html #jquery

Вопрос:

Я снова работаю над домашним заданием по jQuery, и у меня возникла проблема с отображением результатов для функции поиска с помощью Google Books API. У меня есть форма, в которой отображается поисковый запрос, максимальное количество результатов для отображения, а также страница для отображения. На моей странице также есть раздел для отображения моей книжной полки GB, которая функционирует должным образом, я не получаю ошибок в консоли инструментов разработчика Chrome, и VS Code не показывает никаких ошибок. Я взял свою строку поиска, поместил ее в Chrome и ввел значения переменных, чтобы убедиться, что я получаю результаты, что я и делаю. Я уверен, что мне не хватает чего — то маленького, что ускользает от моих глаз.

Код JS

 /*jQuery code to show advanced search bar*/
/*Also hides advanced search link once clicked*/
$(document).ready(function(){
    $("#advanced-search").hide();
    $("#showAdvancedSearch").on('click',function(){
        $("#advanced-search-show").hide();
        $("#advanced-search").show();
    });
});



    /*begin bookshelf*/
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 amp;amp; this.status == 200) {
            var gbaObject = JSON.parse(this.responseText);
            var gbaHTML = '';
            gbaObject.items.forEach(function (item) {
                if (typeof item.volumeInfo.imageLinks != "undefined" amp;amp; item.volumeInfo.imageLinks != null amp;amp; item.volumeInfo.imageLinks != "") {
                    gbaHTML  = `<div class="div200 border" onclick="singleGoogleBooks('`   item.id   `');">
                        <div>
                            <img src="`   item.volumeInfo.imageLinks.smallThumbnail   `" alt="`   item.volumeInfo.title   `" title="`   item.volumeInfo.title   `"/>
                            <div class="title"><strong>Title:</strong> `   item.volumeInfo.title   `</div>
                        </div>
                    </div>`;
                }
            });
            $('#displayBookshelf').html(gbaHTML);
        }
    };
    xmlhttp.open("GET", "https://www.googleapis.com/books/v1/users/115951386289303716892/bookshelves/1001/volumes?startIndex=0amp;maxResults=10", true);
    xmlhttp.send();
    /*end bookshelf*/

    /*begin booksearch*/
    function bookSearch() {
        var term = $("#q-term").val();
        var maxResults = parseInt($("#maxResults").val());
        var goToPage = parseInt($("#goToPage").val());
        var startIndex = parseInt(goToPage) * parseInt(maxResults);
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 amp;amp; this.status == 200) {
            var gbaSearchObject = JSON.parse(this.responseText);
            var gbaSearchHTML = '';
            gbaSearchObject.items.forEach(function (item) {
                if (typeof item.volumeInfo.imageLinks != "undefined" amp;amp; item.volumeInfo.imageLinks != null amp;amp; item.volumeInfo.imageLinks != "") {
                    gbaSearchHTML  = `<div class="div200 border" onclick="singleGoogleBooks('`   item.id   `');">
                        <div>
                            <img src="`   item.volumeInfo.imageLinks.smallThumbnail   `" alt="`   item.volumeInfo.title   `" title="`   item.volumeInfo.title   `"/>
                            <div class="title"><strong>Title:</strong> `   item.volumeInfo.title   `</div>
                        </div>
                    </div>`;
                }
            });
            $('#displayBookResults').html(gbaSearchHTML);
        }
        };
        xmlhttp.open("GET", "https://www.googleapis.com/books/v1/volumes?q="   term   "amp;startIndex="   startIndex   "amp;maxResults="   maxResults   "", true);
        xmlhttp.send();
        return false;
    }
    /*end booksearch*/

    /*send user to details page onclick of results (PDP)*/
    function singleGoogleBooks(bid) {
        window.location.href = '/single-google-books/?bid='   bid   '';
    }
    /*end PDP*/

HTML-код

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lee Baldwin - Milestone 2</title>
    <!--import external stylesheet-->
    <link href="styles/main.css" rel="stylesheet" />

    <!-- import jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!--import external javascript-->
    <script src="scripts/main.js"></script>

  </head>


  <body>
    <div class="header">
        <h1>Lee Baldwin</h1>
        <h3>Kennesaw State University Student</h3>
      </div>
      <div>
        <ul>
        <li><a href="https://www.leebaldwin.website/Milestone1/leebaldwin_milestone1a.html">Milestone 1a</a></li>
        <li><a href="https://www.leebaldwin.website/Milestone1/leebaldwin_milestone1b.html">Milestone 1b</a></li>
        <li><a href="leebaldwin_milestone2.html">Milestone 2</a></li>
        <li><a href="#">Milestone 3</a></li>
        <li><a href="#">Milestone 4</a></li>
        </ul>
      </div>
      <div class="search-bar">
          
            <label for="searchForm">Keywords:</label>
                <form method="post" action="javascript:;" id="searchForm" onsubmit="return bookSearch()">
                    <input type="text" id="q-term" required="required"/>
                    <button type="submit">Submit</button>
          <span id="advanced-search-show"><a href="javascript:;" id="showAdvancedSearch">Advanced Search</a></span>
          <span class="search-bar" id="advanced-search">
            <label for="maxResults">Max Results:</label>
              <select id="maxResults" onchange="bookSearch()">
                <option>10</option>
                <option>20</option>
                <option>30</option>
                <option>40</option>
              </select>

            <label for="goToPage">Go to Page:</label>
              <select id="goToPage" onchange="bookSearch()">
                <option value="0">1</option>
                <option value="1">2</option>
                <option value="2">3</option>
                <option value="3">4</option>
                <option value="4">5</option>
                <option value="5">6</option>
              </select>
          </span>
      </div>
  
          <h2>Search Results</h2>
          <div class="grid-container" id="displayBookResults">
              
              
          </div>
      
      <h2>My Bookshelf</h2>
        <div class="grid-container" id="displayBookshelf">
          
          
        </div>


</body>
</html>

консоль.журнал

 main.js:19 (5) [{…}, {…}, {…}, {…}, {…}]0: {kind: "books#volume", id: "eSIsAwAAQBAJ", etag: "vL5v8dEFNzc", selfLink: "https://www.googleapis.com/books/v1/volumes/eSIsAwAAQBAJ", volumeInfo: {…}, …}1: {kind: "books#volume", id: "LpctBAAAQBAJ", etag: "DoHITbafozc", selfLink: "https://www.googleapis.com/books/v1/volumes/LpctBAAAQBAJ", volumeInfo: {…}, …}2: {kind: "books#volume", id: "Wmfr1Zp7d5EC", etag: "R1DNX3Ho1hU", selfLink: "https://www.googleapis.com/books/v1/volumes/Wmfr1Zp7d5EC", volumeInfo: {…}, …}3: {kind: "books#volume", id: "PXa2bby0oQ0C", etag: "2NYLWaSh5Wc", selfLink: "https://www.googleapis.com/books/v1/volumes/PXa2bby0oQ0C", volumeInfo: {…}, …}4: {kind: "books#volume", id: "ptiYBAAAQBAJ", etag: "mpwwx7aWosM", selfLink: "https://www.googleapis.com/books/v1/volumes/ptiYBAAAQBAJ", volumeInfo: {…}, …}length: 5__proto__: Array(0)

Комментарии:

1. Во что ты влез gbaSearchObject.items и gbaSearchObject.items ? поместите консоль. войдите в журнал перед циклами forEach и почему вы вызывали его два раза

2. Привет, Грег, я не знаком с обертыванием циклов forEach в console.log. Я вызвал его дважды, так как на данный момент это единственный известный мне способ вызывать их в отдельных функциях.

3. не оборачивая, просто поместите console.log(gbaObject.items) перед gbaObject.items.forEach... тем, как вы должны увидеть в журнале консоли массив json элементов

4. Спасибо, Грег. Когда я выполняю эти задания, я делаю заметки о том, что нужно изучить глубже. Я сделал консоль. войдите в оба объекта, и я получаю результаты только из кода книжной полки. Я отредактировал свой оригинальный пост, чтобы добавить консоль. выходы журнала.

Ответ №1:

Я решил свою собственную проблему, но хочу поблагодарить @Greg за его помощь. Чтобы решить эту проблему, я создал код книжной полки как собственную функцию, а затем использовал триггер onLoad в теге body для его загрузки. Я также сделал несколько улучшений, таких как скрытие отображения результатов поиска до тех пор, пока не будет выполнен поиск.

HTML

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lee Baldwin - Milestone 2</title>
    <!--import external stylesheet-->
    <link href="styles/main.css" rel="stylesheet" />

    <!-- import jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!--import external javascript-->
    <script src="scripts/main.js"></script>

  </head>


  <body onload="bookshelf()">
    <div class="header">
        <h1>Lee Baldwin</h1>
        <h3>Kennesaw State University Student</h3>
      </div>
      <div>
        <ul>
        <li><a href="https://www.leebaldwin.website/Milestone1/leebaldwin_milestone1a.html">Milestone 1a</a></li>
        <li><a href="https://www.leebaldwin.website/Milestone1/leebaldwin_milestone1b.html">Milestone 1b</a></li>
        <li><a href="leebaldwin_milestone2.html">Milestone 2</a></li>
        <li><a href="#">Milestone 3</a></li>
        <li><a href="#">Milestone 4</a></li>
        </ul>
      </div>
      <div class="search-bar">
          
            <label for="searchForm">Keywords:</label>
                <form method="post" action="javascript:;" id="searchForm" onsubmit="return bookSearch()">
                    <input type="text" id="q-term" required="required"/>
                    <button type="submit">Submit</button>
          <span id="advanced-search-show"><a href="javascript:;" id="showAdvancedSearch">Advanced Search</a></span>
          <span class="search-bar" id="advanced-search">
            <label for="maxResults">Max Results:</label>
              <select id="maxResults" onchange="bookSearch()">
                <option>10</option>
                <option>20</option>
                <option>30</option>
                <option>40</option>
              </select>

            <label for="goToPage">Go to Page:</label>
              <select id="goToPage" onchange="bookSearch()">
                <option value="0">1</option>
                <option value="1">2</option>
                <option value="2">3</option>
                <option value="3">4</option>
                <option value="4">5</option>
                <option value="5">6</option>
              </select>
          </span>
      </div>
  
          
          <div class="grid-container" id="displayBookResults">
            <h2>Search Results</h2>
              
          </div>
      
      <h2>My Bookshelf</h2>
        <div class="grid-container" id="displayBookshelf">
          
          
        </div>


</body>
</html>

JS

 /*jQuery code to show advanced search bar*/
/*Also hides advanced search link once clicked*/
$(document).ready(function(){
    $("#displayBookResults").hide();
    $("#advanced-search").hide();
    $("#showAdvancedSearch").on('click',function(){
        $("#advanced-search-show").hide();
        $("#advanced-search").show();
    });
});



    /*begin bookshelf*/
    function bookshelf(){
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 amp;amp; this.status == 200) {
            var gbaObject = JSON.parse(this.responseText);
            var gbaHTML = '';
            console.log(gbaObject.items);
            gbaObject.items.forEach(function (item) {
                if (typeof item.volumeInfo.imageLinks != "undefined" amp;amp; item.volumeInfo.imageLinks != null amp;amp; item.volumeInfo.imageLinks != "") {
                    gbaHTML  = `<div class="div200 border" onclick="singleGoogleBooks('`   item.id   `');">
                        <div>
                            <img src="`   item.volumeInfo.imageLinks.smallThumbnail   `" alt="`   item.volumeInfo.title   `" title="`   item.volumeInfo.title   `"/>
                            <div class="title"><strong>Title:</strong> `   item.volumeInfo.title   `</div>
                        </div>
                    </div>`;
                }
            });
            $('#displayBookshelf').html(gbaHTML);
        }
    };
    xmlhttp.open("GET", "https://www.googleapis.com/books/v1/users/115951386289303716892/bookshelves/1001/volumes?startIndex=0amp;maxResults=10", true);
    xmlhttp.send();
    }
    /*end bookshelf*/

    /*begin booksearch*/
    function bookSearch() {
        var term = $("#q-term").val();
        var maxResults = parseInt($("#maxResults").val());
        var goToPage = parseInt($("#goToPage").val());
        var startIndex = parseInt(goToPage) * parseInt(maxResults);
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 amp;amp; this.status == 200) {
            var gbaSearchObject = JSON.parse(this.responseText);
            var gbaSearchHTML = '';
            console.log(gbaSearchObject.items);
            gbaSearchObject.items.forEach(function (item) {
                if (typeof item.volumeInfo.imageLinks != "undefined" amp;amp; item.volumeInfo.imageLinks != null amp;amp; item.volumeInfo.imageLinks != "") {
                    gbaSearchHTML  = `<div class="div200 border" onclick="singleGoogleBooks('`   item.id   `');">
                        <div>
                            <img src="`   item.volumeInfo.imageLinks.smallThumbnail   `" alt="`   item.volumeInfo.title   `" title="`   item.volumeInfo.title   `"/>
                            <div class="title"><strong>Title:</strong> `   item.volumeInfo.title   `</div>
                        </div>
                    </div>`;
                }
            });
            $("#displayBookResults").show();
            $('#displayBookResults').html(gbaSearchHTML);
        }
        };
        xmlhttp.open("GET", "https://www.googleapis.com/books/v1/volumes?q="   term   "amp;startIndex="   startIndex   "amp;maxResults="   maxResults   "", true);
        xmlhttp.send();
        return false;
    }
    /*end booksearch*/

    /*send user to details page onclick of results (PDP)*/
    function singleGoogleBooks(bid) {
        window.location.href = '/single-google-books/?bid='   bid   '';
    }
    /*end PDP*/
Метки: