Can't use .filter() nor for on an array of objects in my pipe

Question

I have an issue with a custom pipe I am creating. My Persos is an array of Perso objects and it seems like I can't apply .filer() so I tried a simple for loop ( which works fine in a *ngFor on such Persos var ) with no success either. I think I am missing something very basic here about handling objects in Typescript.

Here is the pipe code with some tests and comments:

import { Pipe, PipeTransform } from '@angular/core';

import { Perso } from './perso';

@Pipe({ name: 'startsWithPersoPipe' })
export class StartsWithPersoPipe implements PipeTransform {
  transform(Persos: Perso[]){

    // this for makes it all bug, when I comment it my pipe works fine
    for( let perso of Persos){
    }

    // this for does not make it crash but does not behave at all like I want
    for( let perso in Persos){
      console.log(perso); // just prints 0, 1, 2, 3 etc up to 109 ( i have 110 elements in the Perso[] var I use for test)
      console.debug(perso); // same behavior as console.log(perso)
      console.log(perso.nom); // undefined
    }
    console.debug(Persos); // Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 100 more… ]
                          // when I click on on of the Object I get one of my objects with correct values in nom, description and type : it's all fine !
    return Persos;
  }
}

Here is perso.ts

export class Perso {
  nom: string;
  type: string;
  description: string;
}

Any help, hint or link to useful resource that help me solve this is much appreciated.

What does "can't use .filter()" mean exactly? What is the desired behavior? — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 16, 2016 at 9:11
it's like the for of, makes it crash. Ultimately I want to filter out all Perso objects which "nom" starts with "Super" but that part isn't what made it bug so i removed all unnecessary things to show only the faulty code here. — shrimpdrake
– shrimpdrake, Commented Aug 16, 2016 at 9:16

Krishnraj Rana · Accepted Answer · 2016-08-16 09:25:56Z

1

This should do:

@Pipe({ name: 'startsWithPersoPipe' })
export class StartsWithPersoPipe implements PipeTransform {
  transform(Persos: Perso[]){
    if(Persos == null) {
      return null;
    }

    return persos.filter(p => p.nom && p.nom.startsWith('super'));
  }
}

edited Aug 16, 2016 at 9:25

Krishnraj Rana

6,6583 gold badges33 silver badges37 bronze badges

answered Aug 16, 2016 at 9:19

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

shrimpdrake Over a year ago

if(Persos == null) { return null; } is what made it all work. Thanks a lot ! This is quite puzzling for me as in angular.io/docs/ts/latest/guide/pipes.html#flying-heroes-pipe they don't do that ( cf app/flying-heroes.pipe.ts ). When should I ? Why don't they need it and I do ?

Günter Zöchbauer Over a year ago

I guess they just don't pass in null ;-). You should have got a meaningful error message when .filter(...) is called on null.

shrimpdrake Over a year ago

as you can see in console.debug Persos it is not a null value. Moreover I just added the if(Persos == null) { return null; } to my code and the rest worked, meaning Persos wasn't null but for some reason there is a need for verification. Maybe my pipe function is casted before angular gives it its value to Persos, then Persos get initialized and pipe applied again.

Günter Zöchbauer Over a year ago

I guess it is first called with null and later when the value is set again with a non-null value. Just checking for null doesn't do anything.

Collectives™ on Stack Overflow

Can't use .filter() nor for on an array of objects in my pipe

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related