Search code examples
javascriptlodashgoogle-books

Google Books API: Cannot read property 'thumbnail' of undefined

I'm doing a simple project, using Google Books API and encountered with the following error:Cannot read property 'thumbnail' of undefined. It seems, that for some queries there is no image or path to it. For example, for books query it works OK and shows related books. enter image description here

While for great query, it throws an error. enter image description here

As far as I understood there are not book cover in Google Books API for sme books, and that is why it throws the error. I am trying to fix it with help of lodash library, namely _set function. 

document.querySelector('.search-book').addEventListener('click', getBook);
var titleHolder = document.querySelector('.title');
var columns = document.querySelector('.is-parent');
var total = '';
const apiKey = 'AIzaSyCu0GO52L8knIMQ7P_gmazBf_7wlngXqyc';

function getBook() {
  var search = document.querySelector('#input').value;
  console.log(search);
  fetch(
    `https://www.googleapis.com/books/v1/volumes?q=${search}:keyes&key=${apiKey}`
  )
    .then(function(res) {
      return res.json();
    })
    .then(function(data) {
      //console.log(data.items);
      let items = data.items;
      for (var i = 0; i < items.length; i++) {
        // Volume info
        let item = items[i].volumeInfo;

        // Author
        let author = item.authors;

        // Image link
        var imgLink = item.imageLinks.thumbnail;

        // Title
        let title = item.title;

        // Description
        let desc = item.description;

        if (typeof desc === 'undefined') {
          desc = 'No description available';
        }

        if (typeof author === 'undefined') {
          author = 'No author';
        }

        if (!item.imageLinks.firstChild) {
          _.set(
            item,
            'item.imageLinks',
            'thumbnail:https://bulma.io/images/placeholders/128x128.png'
          );
          console.log(data);
        }

        total += `
        <div class=" card tile is-child is-3 box">
          <div class="card-image">
            <figure class="image is-4by3">
              <img src="${imgLink}" alt="Placeholder image">
            </figure>
          </div>
          <div class="card-content">
            <p class="title is-6 has-text-primary has-text-centered is-capitalized">${title}</p>
            <p class="title is-6 has-text-primary has-text-centered is-capitalized">${author}</p>
            <p class="has-text-black-ter has-text-weight-normal">${desc.slice(
              0,
              150
            ) + '...'}</p>
          </div>
        </div>
        `;

        console.log(item);
      }
      columns.innerHTML = total;
    });
}

First of all I check if there is a thumbnail property in object, if there is not such property, I use lodash _set function to substitute absent image with placeholder, but does not work. Please could help me with this issue. Either with loadsh function or suggest me another way out. 

if (!item.imageLinks.firstChild) {
              _.set(
                item,
                'item.imageLinks',
                'thumbnail:https://bulma.io/images/placeholders/128x128.png'
              );
              console.log(data);
            }
Solution

  • i've spent way too much time trying to fix this.

    this is how i did it, now it doesn't throw any errors, finally

    src={
      book.volumeInfo.imageLinks === undefined
        ? ""
        : `${book.volumeInfo.imageLinks.thumbnail}`
  }