There is 404 not found error when I am trying to get data from GoogleBooksApi because the thumbnail does not exist I try to wrote the function to check if the thumbnail exist and if there isn't then replace it but still does not work and does not display another books, what is wrong?
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'
});
}
Your image logic is working. The icons/logo.svg
probably isn't on the environment you're testing it on. Change icons/logo.svg
to https://i.imgur.com/8UdKNS4.jpeg
and it works.
For your second problem, the reason why you only get one result is because JavaScript doesn't know which id="results"
it should select. After you create your content there is now two id="results"
. I changed id="results"
inside your content
variable to id="results_box"
and got the rest of the results.
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'
});
}
Here's a working version of your code: https://jsfiddle.net/edvLpgct/2/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.