Objects given through filter method (for material.angular.io autocomplete field) become undefined

Question

I tried to implement the autocomplete function of angular.material.io. However, upon trying coding it in my code I run into the error of having undefined parameters. I don't know why this exactly is the case.

This is my implemented typescript code.

export class BooksComponent implements OnInit {
  private books: Array<Book> = [];
  //Autofillers & form controllers
  private bookCtrl = new FormControl();
  private filteredBooks: Observable<Book[]>;

  constructor() { 
    //Replace this in the future with data passed from the API
    JSONBooks.forEach(book =>
        this.books.push(new Audiobook(book.title, book.description, book.ISBN, book.image, book.price, book.amazonLink,
          book.publisher, book.amountOfChapters, book.soldCopies, book.adaptedForScreens, book.dateAdded, book.rating, book.amountOfHours))
      );
    //Formcontrol and autofills
    if (this.books) {
      this.filteredBooks = this.bookCtrl.valueChanges
      .pipe(
        startWith(''),
        map(book => book ? this.filterBooks(book) : this.books.slice())
      );
    }
    }

    ngOnInit() {}

    private filterBooks(value: Book): Book[] {
      return this.books.filter(
        //Matches book title
        book => book.getTitle.toLowerCase().indexOf(value.getTitle.toLowerCase()) === 0
        );
    }
}

This is my implemented HTML code.

I'd like to find a book with the title

    </p>
      <form>
        <mat-form-field>
          <input matInput placeholder="Title" aria-label="Title" [matAutocomplete]="auto" [formControl]="bookCtrl">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let book of filteredBooks | async" [value]="book.getTitle">
              <span>{{book.getTitle}}</span>
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>
    <p>

Console output, line 118 is referring to my typescript code, this section: .indexOf(value.getTitle.toLowerCase())

core.js:15723 ERROR TypeError: Cannot read property 'toLowerCase' of undefined
    at books.component.ts:118
    at Array.filter (<anonymous>)
    at BooksComponent.push../src/app/books/books.component.ts.BooksComponent.filterBooks (books.component.ts:116)
    at MapSubscriber.project (books.component.ts:62)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._next (InnerSubscriber.js:15)
    at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at SafeSubscriber.schedulerFn [as _next] (core.js:13514)

I've checked multiple times but cannot seem to find the issue in my code.

NOTE: this.books does get filled and properties can be read. Methodes such as book.getTitle etc work aswell. Somehow the object doesn't get passed to the filterBooks method.

Answer 1

Add a simple if condition to check the value is not null

 this.books.filter(
        //Matches book title
        book => {
             if(!value.getTitle) return false
             return book.getTitle.toLowerCase().indexOf(value.getTitle.toLowerCase()) === 0
        } );

Answer 2

In your constuctor code you are using this.bookCtrl.valueChanges.pipe(). The pipe() function returns Observable. so you need to subscribe to that observable and assign this.filteredBooks variable in that.

this.bookCtrl.valueChanges
      .pipe(
        startWith(''),
        map(book => book ? this.filterBooks(book) : this.books.slice())
      )
      .subscribe((books) => this.filteredBooks = books);

Refer the documentation for Observables: http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

Answer 3

The this.bookCtrl is a control for a text box. Thus, this.bookCtrl.valueChanges is emitting the text in the text-box.

I believe the following code will fix the issue.

// Formcontrol and autofills
if (this.books) {
  this.filteredBooks = this.bookCtrl.valueChanges
    .pipe(
      startWith(''),
      map(bookName => bookName ? this.filterBooks(bookName) : this.books.slice())
    );
}

And the filterBooks function:

  private filterBooks(bookName: string): Test[] {
    return this.books.filter(
      // Matches book title
      book => book.getTitle.toLowerCase().indexOf(bookName.toLowerCase()) === 0);
  }

Also, since bookCtrl and filteredBooks are being used on the html template, it is a good practice to change the access modifiers to public. For more information on this: "private" and "public" in Angular component