Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

156
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!