ERROR TypeError: Cannot read property 'filter' of undefined typescript

error typeerror: cannot read property of undefined angular 8
cannot read property of undefined typescript
uncaught typeerror: cannot read property of undefined
cannot read property of undefined node js
cannot read property of undefined react
cannot read property of null typescript
cannot read property of undefined jquery
cannot read property 'value' of undefined angular 7

I wanted to filter the list of books depending on the clicked author on the left. the authors and the books are in separate arrays, so I got the author id when clicking with route.params and trying to filter books depending on that id but it gives me an error.

How should I filter books on the right with the clicked author??

    import { Component, OnInit } from '@angular/core';
import { BooksService } from '../shared/books.service';
import { ActivatedRoute, Params } from '@angular/router';
import { Book } from './book.model';

@Component({
  selector: 'app-books',
  templateUrl: './books.component.html',
  styleUrls: ['./books.component.scss']
})
export class BooksComponent implements OnInit {
  books: Book[];
  filteredBooks: Book[];
  id: string;

  constructor(
    private booksService: BooksService,
    private route: ActivatedRoute
  ) {}



  ngOnInit() {
    this.booksService.booksChanged
    .subscribe(
      (books: Book[]) => {
        this.books = books;
      }
    );
    this.books = this.booksService.getBooks();

    this.route.params.subscribe((params: Params) => {
      this.id = params['id'];
      this.filteredBooks = this.booksService.books.filter(item => item.author === this.id);
      console.log(this.filteredBooks);
    });
  }
}

Use subscribe for the method which returns books:

this.booksService.getBooks().subscribe(books => {
  this.filteredBooks = books.filter(item => item.author === this.id);
});

angular2: Error: TypeError: Cannot read property '' of undefined , That's because abc is undefined at the moment of the template rendering. You can use safe navigation operator ( ? ) to "protect" template until  Uncaught TypeError: Cannot read property of undefined JavaScript TypeError is thrown when an operand or argument passed to a function is incompatible with the type expected by that operator or function. This error occurs in Chrome Browser when you read a property or call a method on an undefined object. There are a few variations of this error depending on the property you are trying to access.

You need to filter from this.books not from this.booksService.books

 this.filteredBooks = this.books.filter(item => item.author === this.id);

Uncaught TypeError: Cannot read property of undefined , Out of the six primitive types defined in JavaScript, namely boolean, string, symbol, number, Null, and undefined, no other type throws as many errors as  Uncaught TypeError: Cannot read property 'innerHTML' of null All this means is that you are trying to access a property of an object that is undefined. These usually happens when we don't test an object before using it.

This error is caused when the incoming data is 'null' and the filter method was expecting data, thus, this caused the error.

1) Try checking if the data exists or 2) you could initially provide an empty array. Not sure if this works though

books: Book[] = [];

Can you see if this works?

​​Avoiding those dang cannot read property of undefined errors , Uncaught TypeError: Cannot read property 'foo' of undefined.​ The dreaded error we all hit at some point in JavaScript development. Could be  Uncaught TypeError: Cannot read property of undefined In JavaScript Apr 7, 2018 · 2 min read Out of the six primitive types defined in JavaScript, namely boolean, string, symbol, number, Null, and undefined, no other type throws as many errors as Undefined.

[SOLVED] Error: TypeError: Cannot read Property X of undefined , Ok, I'm stuck. I feel like I've checked everything three times over here, and I just can't see what I'm doing wrong. I have the following code in  ERROR TypeError: Cannot read property 'GoogleAuthProvider' of undefined at AppComponent.login (app.component.ts:46) at Object.eval [as handleEvent] (AppComponent.html:13) at handleEvent (core.js:13589) at callWithDebugContext (core.js:15098) at Object.debugHandleEvent [as handleEvent] (core.js:14685) at dispatchEvent (core.js:10004) at eval

[Angular] TypeError: Cannot read property 'value' of undefined , Describe the bug When using a decorator to provide required modules to an angular component, storybook throws the error below: TypeError:  The posts here help me a lot on my way to find a solution for the Uncaught TypeError: Cannot read property 'value' of undefined issue. There are already here many answers which are correct, but what we don't have here is the combination for 2 answers that i think resolve this issue completely.

ERROR TypeError: Cannot read property 'addAlgoliaAgent' of , ERROR TypeError: Cannot read property 'addAlgoliaAgent' of undefined #665. Closed. softmonkeyjapan opened this issue on Jul 25, 2019 · 2 comments. TypeError: Cannot read property 'classList' of null I am not really sure what am I doing wrong in manipulating DOM element for each form field. My form field has an stated name and ID of form and each input field has a name and id of the field as well.

Comments
  • It works onit but not on click, Means when change author doesnt change books
  • Have you used this.booksService.getBooks().subscribe() inside this.route.params.subscribe()?
  • It still gives me ERROR TypeError: Cannot read property 'filter' of undefined
  • @AhmedShaarawy, set variable like this books: Book[] = []; instead of books: Book[]; this..
  • You were right but I made if condition so it works now, Thanks.
  • @AhmedShaarawy glad you fixed it!