Bind conditional data from object array to primeng p-table

Question

I have a User class with different roles (Admin, Evaluator, Recruiter and Applicant). What I need is to fill 2 different p-tables using the same array but I don't know if Primeng make this easily, I mean if this is my array:

users = [{anApplicant, anAdmin, anEvaluator, aRecrutier, anotherApplicant}]

I need these 2 tables: The first one is just for Applicants:

-------------------
|id|name|role     |
-------------------
| 1| xyz|applicant|
-------------------
| 5| xyz|applicant|
-------------------

And a second one for the other 3 roles:

-------------------
|id|name|role     |
-------------------
| 2| xyz|    admin|
-------------------
| 3| xyz|evaluator|
-------------------
| 4| xyz|recruiter|
-------------------

If it's not obviously enough the condition is the role. If anyone could help me I would be very gratefully.

Edit

This is my data:

users: User[] = [];

constructor() {
    this.expirationDate = new Date();

    this.users = [{
      id: '1',
      name: "Administrador",
      username: "Admin",
      email: "test@qacg.com",
      active: true,
      blocked: false,
      expirationDate: new Date(),
      role: "admin"
    }, {
      id: '2',
      name: "Sttefany Klee",
      username: "sttefany.klee",
      email: "test@qacg.com",
      active: true,
      blocked: false,
      expirationDate: new Date(),
      role: "recruiter"
    }, {
      id: '3',
      name: "Mario Olvera",
      username: "mario.olvera",
      email: "test@gmail.com",
      active: true,
      blocked: false,
      expirationDate: new Date(),
      role: "evaluator"
    },{
      id: '4',
      name: "Ricardo Ruiz",
      username: "ricardodars",
      email: "test@gmail.com",
      active: true,
      blocked: false,
      expirationDate: new Date(),
      role: "applicant"
    }, {
      id: '5',
      name: "Dan Olvera",
      username: "dantegalante",
      email: "test@hotmail.com",
      active: true,
      blocked: false,
      expirationDate: new Date(),
      role: "applicant"
    }];

  }

and I want something like this

  //add here some 'where user.role != "applicant"

Fabian Strathaus · Answer

From my point of view you have 3 choices:

1. option: You can just use filter method on the array to filter for specific data.

this.applicants = this.users.filter((user) => user.role === 'applicant');
this.nonApplicants = this.users.filter((user) => user.role !== 'applicant');

2. option: You can wrap this filtering stuff into observables if you have dynamic data instead of static ones.

this.users$ = of([
    {
      id: '1',
      name: "Administrador",
      username: "Admin",
      email: "test@qacg.com",
      active: true,
      blocked: false,
      expirationDate: new Date(),
      role: "admin"
    }, 
    ....
]);
this.applicants$ = this.users$.pipe(map(users => users.filter(user => user.role === 'applicant')));
this.nonApplicants$ = this.users$.pipe(map(users => users.filter(user => user.role !== 'applicant')));

3. option: You can create a custom pipe which filters for specific data

@Pipe({
  name: 'exlcudeRole',
  pure: true,
})
export class ExcludeRolePipe implements PipeTransform {
  transform(values: User[], role: string): User[] {
    return values.filter((value) => value.role !== role);
  }
}

and then use it like this:

Bind conditional data from object array to primeng p-table

Edit

1 Answers