You need to sign in to do that
Don't have an account?
ankita sharma 2110
[Cannot read property 'smallThumbnail' of undefined]
I am trying to pull values from Googlebooks API for my LWC. Below is my code-->
<template if:true={books}>
<template for:each={books.items} for:item="book">
<lightning-layout-item size="3" padding="around-small" key={book.id}>
<div class="slds-box slds-p-around_medium slds-text-align_center">
<img src={book.volumeInfo.imageLinks.smallThumbnail} height="200px">
<div class="slds-text-heading_small slds-p-vertical_medium"><strong>{book.volumeInfo.title}</strong></div>
<div> <strong>Published Date- {book.volumeInfo.publishedDate}</strong></div>
<div> <strong>Average Rating- {book.volumeInfo.averageRating}</strong></div>
<!--div><strong>Categories</strong><span>{book.voumeInfo.categories}</span></div-->
</div>
JS Code->const BOOK_URL = 'https://www.googleapis.com/books/v1/volumes?q='
export default class BookApp extends LightningElement {
query='Man'
books
connectedCallback(){
this.fetchBookData()
}
fetchBookData(){
fetch(BOOK_URL+this.query)
.then(Response=>Response.json())
.then(data=>{
console.log(data)
this.books = data
})
.catch(error=>console.error(error))
}
}
For both the categories and small thumbnail i am getting error -> [Cannot read property 'smallThumbnail' of undefined]
<template if:true={books}>
<template for:each={books.items} for:item="book">
<lightning-layout-item size="3" padding="around-small" key={book.id}>
<div class="slds-box slds-p-around_medium slds-text-align_center">
<img src={book.volumeInfo.imageLinks.smallThumbnail} height="200px">
<div class="slds-text-heading_small slds-p-vertical_medium"><strong>{book.volumeInfo.title}</strong></div>
<div> <strong>Published Date- {book.volumeInfo.publishedDate}</strong></div>
<div> <strong>Average Rating- {book.volumeInfo.averageRating}</strong></div>
<!--div><strong>Categories</strong><span>{book.voumeInfo.categories}</span></div-->
</div>
JS Code->const BOOK_URL = 'https://www.googleapis.com/books/v1/volumes?q='
export default class BookApp extends LightningElement {
query='Man'
books
connectedCallback(){
this.fetchBookData()
}
fetchBookData(){
fetch(BOOK_URL+this.query)
.then(Response=>Response.json())
.then(data=>{
console.log(data)
this.books = data
})
.catch(error=>console.error(error))
}
}
For both the categories and small thumbnail i am getting error -> [Cannot read property 'smallThumbnail' of undefined]
try below code.
your error was coming because in actual data imageLinks this property was not coming in 3-4 item so I did handle them. use above code.
don't forget to mark it as best answer.
Thank you