Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

166
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda