I have a project where I am using Google Books API to get book info based on when the user enters. They can search books 3 different ways. In my js code i used fetch to get the info and display it on the page, however I wan to redirect users to a results page with the specific data. My issue is that when I use window.location.href = "resultPr.html"; my catch block alerts me, removes the information from the console log and leave me with a blank results page.
$(document).ready(function() {
var title;
var author;
var img;
var description;
var purchase;
const tableBody = $("#results");
$("#searchform").submit(function() {
const searchTerm = $("#titleName").val();
const selection = $('input[name="search"]:checked').val();
if (searchTerm === '') {
alert("Search Bar is empty");
} else {
switch (selection) {
case 'ISBN10':
if (validIsbn(searchTerm)) {
fetch(`https://www.googleapis.com/books/v1/volumes?q=isbn:${searchTerm}`)
.then(response => response.json())
.then(data => {
for(i=0;i<data.items.length;i++){
const row = $("<tr>");
const imgCell = $("<td>").html(`<img class="imgNail" id="thumbnail" src="${data.items[i].volumeInfo.imageLinks.thumbnail}">`);
const titleCell = $("<td>").text(data.items[i].volumeInfo.title);
const authorCell = $("<td>").text(data.items[i].volumeInfo.authors);
const descCell = $("<td>").text(data.items[i].volumeInfo.description);
const purchaseCell = $("<td>").text(data.items[i].saleInfo.buyLink);
imgCell.appendTo(row);
titleCell.appendTo(row);
authorCell.appendTo(row);
descCell.appendTo(row);
purchaseCell.appendTo(row);
$('#resultsBody').append(row);
row.appendTo(tableBody);
}
console.log(data);
})
.catch(error => {
alert('Error: Could not retrieve book information.');
});
} else {
alert("ISBN10 entered incorrectly");
}
break;
case 'title':
if (searchTerm!=='') {
const encodedSearchTerm = encodeURIComponent(searchTerm);
fetch(`https://www.googleapis.com/books/v1/volumes?q=${encodedSearchTerm}`)
.then(response => response.json())
.then(data => {
for(i=0;i<data.items.length;i++){
const row = $("<tr>");
const imgCell = $("<td>").html(`<img class="imgNail" id="thumbnail" src="${data.items[i].volumeInfo.imageLinks.thumbnail}">`);
const titleCell = $("<td>").text(data.items[i].volumeInfo.title);
const authorCell = $("<td>").text(data.items[i].volumeInfo.authors);
const descCell = $("<td>").text(data.items[i].volumeInfo.description);
const purchaseCell = $("<td>").text(data.items[i].saleInfo.buyLink);
imgCell.appendTo(row);
titleCell.appendTo(row);
authorCell.appendTo(row);
descCell.appendTo(row);
purchaseCell.appendTo(row);
$('#resultsBody').append(row);
//not being used
// row.appendTo("#tableBody");
row.appendTo(tableBody);
}
// window.location.href = "resultPr.html";
console.log(data);
})
.catch(error => {
alert('Error: Could not retrieve book information.');
});
}
break;
case 'author':
if (searchTerm!=='') {
fetch(`https://www.googleapis.com/books/v1/volumes?q=inauthor${searchTerm}`)
.then(response => response.json())
.then(data => {
for(i=0;i<data.items.length;i++){
const row = $("<tr>");
const imgCell = $("<td>").html(`<img class="imgNail" id="thumbnail" src="${data.items[i].volumeInfo.imageLinks.thumbnail}">`);
const titleCell = $("<td>").text(data.items[i].volumeInfo.title);
const authorCell = $("<td>").text(data.items[i].volumeInfo.authors);
const descCell = $("<td>").text(data.items[i].volumeInfo.description);
const purchaseCell = $("<td>").text(data.items[i].saleInfo.buyLink);
imgCell.appendTo(row);
titleCell.appendTo(row);
authorCell.appendTo(row);
descCell.appendTo(row);
purchaseCell.appendTo(row);
$('#resultsBody').append(row);
row.appendTo(tableBody);
}
console.log(data);
})
.catch(error => {
alert('Error: Could not retrieve book information.');
});
}
break;
default:
alert('Please select a search category.');
break;
}
}
return false;
});
});
function validIsbn(ISBN) {
ISBN = ISBN.replace(/[-\s]/g, "");
if (ISBN.length !== 10) {
return false;
}
if (!/^\d+$/.test(ISBN)) {
return false;
}
return true;
}
At this point I dont know what to next when i remove the windows location segment it will just just display on the page. Here is the html as well.
<section>
<table id="results">
<thead>
<tr>
<th id="resTab">Image</th>
<th id="resTab">Title</th>
<th id="resTab">Author</th>
<th id="resTab">Description</th>
<th id="resTab">Purchase</th>
</tr>
</thead>
<tbody id="resultsBody">
</tbody>
<br>
</table>
</section>