My api in c# send all the employees informations from the database to my web app (angular).

I want to don't print in (angular) the employees whose id begins with '#'.

Employee = Collaborateur

Here is my angular service which calls my api to retrieve the information :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  localUrlAPI: string = environment.urlAPI;

  constructor(private _http : HttpClient) { }

  getAllCollaborateurs(){
    return this._http.get<any>(this.localUrlAPI "/annuaire/GetAnnuaire")
    .pipe(map((res:any)=>{
      return res.Data;
    }))
  }

}

Here is my angular component : the html part uses the kendo library and his grid to display the employees into the grid

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { ApiService } from 'src/app/services/api.service';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.scss']
})
export class GridComponent implements OnInit {

  collaborateurData !: any[];
  public format = "dd/MM/yyyy";

  constructor(private api: ApiService, private router: Router, private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    this.getAllCollaborateur();
  }

  getAllCollaborateur(){
    this.api.getAllCollaborateurs()
    .subscribe(res=>{
      this.collaborateurData = res;
      console.log(this.collaborateurData)
    })
  }

}

<kendo-grid [kendoGridBinding]="collaborateurData" [filterable]="true" [resizable]="true" [sortable]="true" [pageable]=true [pageSize]="15" >
  
  <!-- Column Id -->
  <kendo-grid-column field="Id" title="Matricule" [headerStyle]="{'background-color': '#082d61', 'color': '#ffffff', 'font-weight': 'bold'}">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell [column]="column" [filter]="filter" [showOperators]="false">
      </kendo-grid-string-filter-cell>
    </ng-template>
    <ng-template kendoGridCellTemplate let-collaborateur>
      <div *ngIf="collaborateur.TypeSalarie === 'A'">
        <a [routerLink]="['/salarie/',collaborateur.Id]">{{ collaborateur.Id }}</a>
      </div>
      <div *ngIf="collaborateur.TypeSalarie === 'I'">
        <a [routerLink]="['/interimaire/',collaborateur.Id]">{{ collaborateur.Id }}</a>
      </div>
      <div *ngIf="collaborateur.TypeSalarie === 'P'">
        <a [routerLink]="['/prestataire/',collaborateur.Id]">{{ collaborateur.Id }}</a>
      </div>
    </ng-template>
  </kendo-grid-column>
  
</kendo-grid>

CodePudding user response：

First of all, it's not your job to filter data from API (bad performance because you receive a lot of informations for nothing).

You can use filter function (or pipe directly in your template).

  getAllCollaborateur(){
    this.api.getAllCollaborateurs()
    .subscribe(res=>{
      this.collaborateurData = res.filter((item) => item.Id.toLowerCase().indexOf('#') !== 0);
      console.log(this.collaborateurData);
    })
  }

For # and $ :

  getAllCollaborateur(){
    this.api.getAllCollaborateurs()
    .subscribe(res=>{
      this.collaborateurData = res.filter((item) => item.Id.toLowerCase().indexOf('#') !== 0 && item.Id.toLowerCase().indexOf('$');
      console.log(this.collaborateurData)
    })
  }