Google books api returns ERROR TypeError: Cannot read property 'thumbnail' of undefined Angular 8

Question

I am making simple angular web application in which user can search for books and returns different books.

It's mostly working fine, but for some titles searched such as "neena" it returns TypeError: Cannot read property 'thumbnail' of undefined

I looked in to the http response on the console and find out for some books books.volumeInfo.imageLinks , item.volumeInfo.imageLinks.thumbnail are missing

I saw this solution here Google books api returns missing parameters, but dont know how to use it in my application.

service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Observable} from 'rxjs';
import 'rxjs/Rx';


@Injectable({
  providedIn: 'root'
})
export class GoogleapiService {

  API_KEY = 'AIzaSyDHDCI5JYsbDRGRa5nx252a0kv43XwCpvE';

  constructor(private httpClient: HttpClient) { }

  getNews(searchText):Observable<any>{
    const encodedURI = encodeURI("https://www.googleapis.com/books/v1/volumes?q="+searchText+"&maxResults=12&key=");
    return this.httpClient.get(encodedURI);
  } 
}

component.ts

import { Component, OnInit } from '@angular/core';
import {GoogleapiService} from '../services/googleapi.service';
import { NgForm } from '@angular/forms';
import {Books} from '../booksearch/books';


@Component({
  selector: 'app-booksearch',
  templateUrl: './booksearch.component.html',
  styleUrls: ['./booksearch.component.css']
})
export class BooksearchComponent implements OnInit {
  items;
  searchText;
  constructor(private googleapiservice: GoogleapiService) { }
  ngOnInit() { 
  }

  onSubmit(form:NgForm){
   this.searchText = form.value.searchVariable;
    this.googleapiservice.getNews(form.value.searchVariable).subscribe((data)=>{
      this.items = data['items'];
      console.log(data);

      //console.log("test");
      //console.log(this.items[1].volumeInfo.imageLinks.thumbnail);
      //console.log(form.value.searchVariable);
    });

  }  

}

component.html

<h1>BOOKS</h1>

<div class="container">
    <h1>search your books</h1>
    <form #searchForm="ngForm" (ngSubmit)="onSubmit(searchForm)">
        <div class="form-group">
            <input type="text" class="form-control mt-10" name="searchVariable" placeholder="search for books" autocomplete="off" ngModel/>
        </div>
            <button type="submit" class="btn btn-danger"> Search</button>
    </form>
</div>   
<div *ngFor="let item of items">
    <h2>{{item?.volumeInfo.title}}</h2>
    <p>{{item?.volumeInfo.authors}}</p>
    <p>{{item?.volumeInfo.description}}</p>
    <p>{{item.volumeInfo.imageLinks?.thumbnail}}</p>
    <img src={{item.volumeInfo.imageLinks.thumbnail}} alt="Smiley face" height="42" width="42">

</div>

I am new to angular 8 and i dont know how and where to use const paidBooks = apiResponse.data.filter(book => book.listPrice) as per the solution

Please somebody help me

thanks

Answer 1

The problem is in the component.html line where you have {{item.volumeInfo.imageLinks.thumbnail}} imageLinks is undefined and you can't get thumbnail of undefined. you have to check if item.volumeInfo.imageLinks != undefined before you get the thumbnail.