Hay un error 404 no encontrado cuando intento obtener datos de GoogleBooksApi porque la miniatura no existe. Intento escribir la función para verificar si la miniatura existe y, si no existe, reemplácela, pero aún no funciona y no funciona. mostrar otros libros, ¿qué está mal?
function bookSearch() { var search = document.getElementById('search-box').value document.getElementById('results').innerHTML = "" const fictionCards = document.getElementById('fiction-cards'); while(fictionCards.children && fictionCards.children.length) { fictionCards.removeChild(fictionCards.children[0]); } document.getElementById('type').classList = "hide-cards"; $.ajax({ url: "https://www.googleapis.com/books/v1/volumes?q=" + search, dataType: "json", success: function(data) { for (i = 0; i< data.items.length; i++){ const extractThumbnail = ({ imageLinks }) => { const DEFAULT_THUMBNAIL = "icons/logo.svg"; if (!imageLinks || !imageLinks.thumbnail) { return DEFAULT_THUMBNAIL; } return imageLinks.thumbnail.replace("http://", "https://"); }; const card = document.createElement('div'); card.classList="card"; document.getElementById('top-today').classList = 'hide-cards'; //card content const content = ` <h1>Fiction</h1> <div class="card" style="margin:50px; width: 18rem;"> <img class="card-img-top align-items-center mx-auto" src="${extractThumbnail(data.items[i].volumeInfo)}" style="width:170px; height:230px;" alt=""> <div class="card-body" id="results"> <h5 class="card-title" style="font-weight:bold">${data.items[i].volumeInfo.title}</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <div class="d-flex"> <a href="#" class="btn btn-dark mx-2" style="height:2.5rem;">Add</a> <a href="${data.items[i].saleInfo.buyLink}"class="btn btn-dark" style="height:2.5rem;">Buy</a> </div> </div> `; results.innerHTML += content; } }, type: 'GET' }); }Su lógica de imagen está funcionando. El icons/logo.svg probablemente no esté en el entorno en el que lo está probando. Cambie icons/logo.svg a https://i.imgur.com/8UdKNS4.jpeg y funciona.
Para su segundo problema, la razón por la que solo obtiene un resultado es porque JavaScript no sabe qué id="results" debe seleccionar. Después de crear su contenido, ahora hay dos id="results" . Cambié id="results" dentro de su variable de content a id="results_box" y obtuve el resto de los resultados.
function bookSearch() { var search = document.getElementById('search-box').value document.getElementById('results').innerHTML = "" const fictionCards = document.getElementById('fiction-cards'); while(fictionCards.children && fictionCards.children.length) { fictionCards.removeChild(fictionCards.children[0]); } document.getElementById('type').classList = "hide-cards"; $.ajax({ url: "https://www.googleapis.com/books/v1/volumes?q=" + search, dataType: "json", success: function(data) { for (i = 0; i< data.items.length; i++){ const extractThumbnail = ({ imageLinks }) => { const DEFAULT_THUMBNAIL = "https://i.imgur.com/8UdKNS4.jpeg"; if (!imageLinks || !imageLinks.thumbnail) { return DEFAULT_THUMBNAIL; } return imageLinks.thumbnail.replace("http://", "https://"); }; const card = document.createElement('div'); card.classList="card"; document.getElementById('top-today').classList = 'hide-cards'; //card content const content = ` <h1>Fiction</h1> <div class="card" style="margin:50px; width: 18rem;"> <img class="card-img-top align-items-center mx-auto" src="${extractThumbnail(data.items[i].volumeInfo)}" style="width:170px; height:230px;" alt=""> <div class="card-body" id="results_box"> <h5 class="card-title" style="font-weight:bold">${data.items[i].volumeInfo.title}</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <div class="d-flex"> <a href="#" class="btn btn-dark mx-2" style="height:2.5rem;">Add</a> <a href="${data.items[i].saleInfo.buyLink}"class="btn btn-dark" style="height:2.5rem;">Buy</a> </div> </div> `; results.innerHTML += content; } }, type: 'GET' }); }Aquí hay una versión funcional de su código: https://jsfiddle.net/edvLpgct/2/