Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

167
Visualizações
Why can't I display data from API with searchBar?

So I have a searchBar which searches books from Google Books API and displays results in divs. But the problem is, when I for example type "harry potter" it doesn't display anything, but if i type just "harry" it displays some books as shown below: enter image description here

There're about 10 more books down below, and none of them contains any Harry Potter books. I don't know how could I make it display all results which contain particular word.

My javascript code:

const searchBar =  document.getElementById('search');
    searchBar.addEventListener('keyup', (e) =>{   //event for searching books
        const searchString = e.target.value;
        searchBook(searchString);
        console.log(e.target.value);
    })
    
    
    function searchBook(query){       //function for searching books by query
        const url = BASE_URL + `${query}` + '&' + API_KEY;
    
        fetch(url)
        .then(res => res.json())
        .then(books => showBooks(books.items));
    }
    
    showBooks = books =>{       //function for displaying books
        const main = document.getElementById('book_container');
        main.innerHTML = "";
            books.forEach(book => {
                title = book.volumeInfo.title;
                author = book.volumeInfo.authors;
                description = book.volumeInfo.description;
                img = book.volumeInfo.imageLinks.thumbnail;
    
                const bookEl = document.createElement('div');
                bookEl.classList.add('book');
    
                bookEl.innerHTML = `
                <div class="book">
                    <img src="${img}">
            <div class="book_info">
                    <h3>${title}</h3>
                    <p>${author}</p>
            </div>
        </div>
                `
    
                main.appendChild(bookEl);
            });  
            }; 
}

And there's also sometimes a following mistake: enter image description here

It has to do with img = book.volumeInfo.imageLinks.thumbnail;, but I don't know why it displays, cause sometimes images display just fine, and sometimes this error pops up, though I'm pretty sure that my properties are defined.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

Problem 2:

And there's also sometimes a following mistake:

Because some objects may not be having imageLinks property and in that case this error is likely to occur.

Solution: Check if the imageLinks exist and only show the thumbnail then.

book.volumeInfo.imageLinks && book.volumeInfo.imageLinks.thumbnail

with TypeScript

book.volumeInfo.imageLinks?.thumbnail
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda