ERROR TypeError: Cannot read property 'toLowerCase' of null

Hello! I’m trying create a search bar from my json response. Well, with my keys of my json works, but com a specific key: publisher. return this error:

core.js:6157 ERROR TypeError: Cannot read property ‘toLowerCase’ of null
at filtro.pipe.ts:17
at Array.filter ()
at FiltroPipe.transform (filtro.pipe.ts:15)
at pureFunction2Internal (core.js:25605)
at ɵɵpipeBind2 (core.js:25779)
at AllPage_ion_list_7_Template (template.html:17)
at executeTemplate (core.js:9545)
at refreshView (core.js:9414)
at refreshEmbeddedViews (core.js:10534)
at refreshView (core.js:9438)

My html’s code:

<ion-header no-border>
  <ion-toolbar color="primary">
    <ion-buttons>
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <div class="search">
    <ion-searchbar id="custom-search" placeholder="Procurar personagem" animated (ionChange)="buscarHero($event)"></ion-searchbar>
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list *ngIf="heros.length > 0">
  <!--class="results" *ngFor="let hero of heros | filtro: busca" [routerLink]="'/hero/' + [hero.name]" [detail]="false" lines="none">-->
    <ion-grid>
      <ion-row>
        <ion-col size="4" *ngFor="let hero of heros | filtro: busca" [routerLink]="'/hero/' + [hero.name]">
          <p>{{hero.biography.publisher}}</p>
          <img src="{{hero.images.md}}">
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-list>

</ion-content>

My ts’s code:

import { Component, OnInit } from '@angular/core';
import { Api } from '../models/heros.model';
import { DataService} from '../Services/data.service';

@Component({
  selector: 'app-all',
  templateUrl: './all.page.html',
  styleUrls: ['./all.page.scss'],
})
export class AllPage implements OnInit {
  heros: Api[] = []
  busca = '';

  constructor(
    private data: DataService
  ) { 
    this.data.getHeros().subscribe(response => this.heros = response)
  }

  ngOnInit() {
  }

  buscarHero(event){
    const text = event.target.value;
    console.log(text)
    this.busca = text;
  }

}

My Pipe’s code

import { Pipe, PipeTransform } from '@angular/core';
import { Api } from '../models/heros.model';

@Pipe({
  name: 'filtro'
})

export class FiltroPipe implements PipeTransform {

  transform(heros: Api[], texto: string): Api[] {
    if (texto.length === 0){ return heros;}
    
    texto = texto.toLowerCase();
    var number: number;
    return heros.filter(hero =>{
      return hero.name.toLowerCase().includes(texto)
            || hero.biography.publisher.toLowerCase().includes(texto);
    })

  }


}

My json response (i will post just one, because is so long)

[
  {
    "id": 1,
    "name": "A-Bomb",
    "slug": "1-a-bomb",
    "powerstats": {
      "intelligence": 38,
      "strength": 100,
      "speed": 17,
      "durability": 80,
      "power": 24,
      "combat": 64
    },
    "appearance": {
      "gender": "Male",
      "race": "Human",
      "height": [
        "6'8",
        "203 cm"
      ],
      "weight": [
        "980 lb",
        "441 kg"
      ],
      "eyeColor": "Yellow",
      "hairColor": "No Hair"
    },
    "biography": {
      "fullName": "Richard Milhouse Jones",
      "alterEgos": "No alter egos found.",
      "aliases": [
        "Rick Jones"
      ],
      "placeOfBirth": "Scarsdale, Arizona",
      "firstAppearance": "Hulk Vol 2 #2 (April, 2008) (as A-Bomb)",
      "publisher": "Marvel Comics",
      "alignment": "good"
    },
    "work": {
      "occupation": "Musician, adventurer, author; formerly talk show host",
      "base": "-"
    },
    "connections": {
      "groupAffiliation": "Hulk Family; Excelsior (sponsor), Avengers (honorary member); formerly partner of the Hulk, Captain America and Captain Marvel; Teen Brigade; ally of Rom",
      "relatives": "Marlo Chandler-Jones (wife); Polly (aunt); Mrs. Chandler (mother-in-law); Keith Chandler, Ray Chandler, three unidentified others (brothers-in-law); unidentified father (deceased); Jackie Shorr (alleged mother; unconfirmed)"
    },
    "images": {
      "xs": "https://cdn.jsdelivr.net/gh/akabab/superhero-api@0.3.0/api/images/xs/1-a-bomb.jpg",
      "sm": "https://cdn.jsdelivr.net/gh/akabab/superhero-api@0.3.0/api/images/sm/1-a-bomb.jpg",
      "md": "https://cdn.jsdelivr.net/gh/akabab/superhero-api@0.3.0/api/images/md/1-a-bomb.jpg",
      "lg": "https://cdn.jsdelivr.net/gh/akabab/superhero-api@0.3.0/api/images/lg/1-a-bomb.jpg"
    }
  }
]

So, anybody can helps me?

1 post - 1 participant

Read full topic