Javascript - Angular don't show same user as currently shown

weinde
July 14, 2023
293 views
1 vote
2 Answers

So I need some help showing a list of users that I get from an API call… each user has an unique ID but on the JSON that I get from the API the first user is always the same as currently opened…

So example… my url is www.domain.com/user/12345 for this user I get a list of related users but the first user on that list is that same user with this 12345 ID… how do I skip the user with the same ID as currently opened so that on the list of those similar users that user wouldn’t appear?

Here is the service how I’m getting the data from the API:

  getCustomerSimilar(id:number): Observable<CustomerSimilar> {
    return this.httpClient.get<CustomerSimilar>(`${environment.apiUrl}customer/${id}/similar`)
  }

Here is the .ts file how I get the users from API:

  getCustomerSimilar() {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.customerService.getCustomerSimilar(id).subscribe(
      data => {
        this.similarClients = data.data;
      },
      error => {
        console.log('Error', error);
      });
  }

Here is the JSON response I get:

"data": [
    {
        "id": "12345",
        "name": "Name Lastname",
    },
    {
        "id": "12346",
        "name": "Something Lastname",
    },
    {
        "id": "12347",
        "name": "Something Something",
    }
 ]

Here is my model

export interface CustomerSimilar {
  data: [
    {
      id: number;
      name: string;
    }
  ]
}

here is the HTML template so show the users:

        <mat-list-item *ngFor="let podobna of similarClients" class="mat-list-item-focus" routerLink="/customers/{{podobna.id}}" role="navigation">
          <mat-icon class="material-icons-outlined" matListItemIcon>account_circle</mat-icon>
          <div matListItemTitle class="similar-customer-name">{{podobna.name}}</div>
          <div matListItemLine class="similar-customer-ddv" *ngIf="podobna.vat_number">VAT: {{podobna.vat_number}}</div>
          <div matListItemLine class="similar-customer-id">ID: {{podobna.id}}</div>
          <div matListItemLine class="similar-customer-email" *ngIf="podobna.email">Email: {{podobna.email}}</div>
        </mat-list-item>

Answers

You can filter other than the id of that user like that

getCustomerSimilar() {
  const id = Number(this.route.snapshot.paramMap.get('id'));
  this.customerService.getCustomerSimilar(id)
  .pipe(
    map(response => response.data),
    map(users => users.filters(user => user.id != id))
  )
  .subscribe(
    data => {
      this.similarClients = data;
    },
    error => {
      console.log('Error', error);
    });
}

import map from rxjs

Filter the response data you receive from the service at component level based on the id once you receive the response inside the subscribe method in the component getCustomerSimilar() method and assign it to the this.similarClients array.

Read more on array filter here.

Refer to the below code for reference :

     getCustomerSimilar() {
        const id = Number(this.route.snapshot.paramMap.get('id'));
        this.customerService.getCustomerSimilar(id).subscribe(
          data => {
            data.data = data?.data?.filter(function (el) {
            return el.id != id ;
           }
        );
       this.similarClients =data;
      },
      error => {
        console.log('Error', error);
      });
  }

Refer the plain javascript working sample below :

var arr ={
   "data": [
    {
        "id": "12345",
        "name": "Name Lastname",
    },
    {
        "id": "12346",
        "name": "Something Lastname",
    },
    {
        "id": "12347",
        "name": "Something Something",
    }
  ]
 }

const id = 12345;
 
arr.data = arr?.data?.filter(function (el) {
    return el.id != id ;
});

console.log(arr);

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – Angular don't show same user as currently shown

Answers