How to work with filter in an array typescript?

Asked

Viewed 63 times

1

I will prefer to show first the error message you are giving.

error TS2349: Cannot invoke an Expression Whose type Lacks a call Signature. Type '((...items: any[]) => number) | (...items: Racaespecificotipo[]) => number)' has no compatible call Signatures.

This message appears immediately when I upload the Angular application. I will prefer to show you the code of how it was before and then how to show my attempt and then immediately tell my goal of my modification.

This is the data coming from the database:

0: {id: 1, Description: "Flounder", type: "Glkpo", type: "Fish"} 1: {id: 2, Description: "Scales", type: "GENERIC", typeAnimal: "Fish"} 2: {id: 3,... } 3: {id: 4, Description: "Bats", type: "GENERIC",... } 4: {id: 5, Description: "Scales", type: "GENERIC",... } 5: {id: 6, Description: "Dogs", type: "GENERIC", typeAnimal: "Mamiferos"} 6: {id: 7,... } 7: {id: 8, Description: "Put", type: "Glkpo",... } 8: {id: 9, Description: "Scales", type: "GENERIC", typeAnimal: "Fishes"} 9: {id: 10, Description: "Wolves", typeAnimal: "Mamiferos"} 10: {id: 11, Description: "Other", type: "OTHER", typeAnimal: "Fish"}

That is the entity in question:

export class RacaEspecificaTipo {
  id: number;
  descricao: string;
  tipo: RascsEspecificoTipoEnum;
  tipoAnimal: string;
}

This is the implementation before the modification:

loadTiposRacas(): void {
        this.eventSubmitStart.emit();
        this.service.getTiposRacas()
          .pipe(catchError(this.handleErrorAndContinue([])))
          .subscribe(tiposRacas => {
            this.tiposRacas = tiposRacas;
            this.eventSubmitDone.emit(false);
          });
        }

My goal is to put a filter on the list in such a way that it lists only records whose typohymal be only Pisces, I was not successful for lack of typescript skill, I do not know how it works with Arrays, when I did this mofificação as you can see below it generate error as shown at the beginning of this post. This code below was my attempt to filter the records.

  loadTiposRacas(): void {
    this.eventSubmitStart.emit();
    this.service.getTiposRacas()
      .pipe(catchError(this.handleErrorAndContinue([])))
      .subscribe(tiposRacas => {
        this.tipoRacas.filter(value =>  { 
            value.tipoAnimal === "Peixes"
            
            tiposRacas.push(value);
           
            
        }); 
        this.eventSubmitDone.emit(false);      
    });   
  }

The variable typeRacas is being started through this variable below:

typRacas : Racaespecificotipo[] = [];

Please what modification could I perform on my code that could correct the error? The expected result should be this below;

0: {id: 1, Description: "Flounder", type: "Glkpo", type: "Fish"} 1: {id: 2, Description: "Scales", type: "GENERIC", typeAnimal: "Fish"} 2: {id: 3,... } 3: {id: 5, Description: "Scales", type: "GENERIC",... } 4: {id: 7,... } 5: {id: 8, Description: "Put", type: "Glkpo",... } 6: {id: 9, Description: "Scales", type: "GENERIC", typeAnimal: "Fishes"} 7: {id: 11, Description: "Other", type: "OTHER", typeAnimal: "Fish"}

angular typescript

1 answer

1


What you missed is confusing the variable created to show the information in your component with the one that returns a result of your API request, i.e., this.tipoRacas is the variable of the component and tipoRacas is the result of the request, so it is tipoRacas that the filter should be applied and finally pass the value to this.tipoRacas, example:

loadTiposRacas(): void {
    this.eventSubmitStart.emit();
    this.service.getTiposRacas()
      .pipe(catchError(this.handleErrorAndContinue([])))
      .subscribe(tiposRacas => {
        this.tipoRacas = 
            tipoRacas.filter(value => 
                value.tipoAnimal === "Peixes"
            ); 
        this.eventSubmitDone.emit(false);      
    });   
}

the difference is subtle: this.tipoRacas = tipoRacas.filter, that is to say, this.tipoRacas receives the filtered value of tipoRacas, i would make one more modification not putting equal name and variables that has different functionalities in the code.

References:

Browser other questions tagged angular typescript

You are not signed in. Login or sign up in order to post.