Failed to load resource: the server responded with a status of 404 (Not Found) GoogleBooks Api

Question

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'
    });
}

Answer 1

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/