How do I redirect information from an api to another html page?

54 Views Asked by At

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>
 
0

There are 0 best solutions below