最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Google Books API: Cannot read property 'thumbnail' of undefined - Stack Overflow

programmeradmin0浏览0评论

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.

While for great query, it throws an error.

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(
    `=${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:.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:.png'
              );
              console.log(data);
            }

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.

While for great query, it throws an error.

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./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);
            }
Share Improve this question asked Aug 5, 2018 at 7:29 NZMAINZMAI 5466 silver badges28 bronze badges 1
  • Sounds like sometimes there are no imageLinks. Add a test for that first, see if it helps – CertainPerformance Commented Aug 5, 2018 at 7:31
Add a ment  | 

1 Answer 1

Reset to default 11

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}`
  }
发布评论

评论列表(0)

  1. 暂无评论