Filtering array in Angular it is getting only the last value

I am trying to filter an array which it should works as follow.
I have users and I have pages role.
In the pages role I have the user_id and the role.

I need to check if user_id exist in one page then don’t show it to the users array anymore.
If user_id doesn’t exist then it will be shown at the search array of users.

When I try to console.log the users and the pages.role I am getting like this.
For pages.role

pages {role: "Moderator", userID: "5fbc1bc72ffec245c4bd7725"}
pages {role: "Editor", userID: "5eacb3617977572bb34bfc89"}
pages {role: "Analyst", userID: "602e435fd201a0092d791b36"}

And for the users.

0: {_id: "5eacb3617977572bb34bfc89", firstName: "test", email: "test.test@outlook.com", lastName: "test", password: "$2b$10$UEM0xsB/tJQJ8xQKhuZXDOIZ/K26bSje28zPOvEAjrOWQqciEY7s.", …}
1: {_id: "5fbc1bc72ffec245c4bd7725", firstName: "test", email: "test.test@test.de", lastName: "test", password: "$2b$10$iynDhvHHYs4SCFOXwdccBOvYnqUxjS.SihLAF5ugO9gQQbnNESjU.", …}
2: {_id: "602e433bd201a0092d791b05", firstName: "Smart", email: "smart@smart.com", lastName: "test", password: "$2b$10$fJ4Uqx0DILQUzrPDKiVpnOYqhdbqEYH1vZVnR5HMNOYO4yyNUWcKa", …}
3: {_id: "602e435fd201a0092d791b36", firstName: "al", email: "t@t.com", lastName: "al", password: "$2b$10$joZSBS9uwEmCi2L3G2CtZ.JuSIIpBpL/2iPe3LCQ/YpXyVQOL1jpu", …}
4: {_id: "602e4c30e3346466703376ab", firstName: "BL", email: "bl@outlook.com", lastName: "br", password: "$2b$10$R.s.X1ezymXgH0XVnWfW/etIiRqeHjsl6HfQi00pudvWS6dGxIErG", …}
length: 5

This is my code in TS.

  public page: Page;
  public name;
  public users: User[] = [];
  public searchUsers: User[] = [];
  public search = "";
  public role = new Roles();
  public userID;
  public privacies = [
    { id: Role.Admin, name: "role.admin" },
    { id: Role.Editor, name: "role.editor" },
    { id: Role.Moderator, name: "role.moderator" },
    { id: Role.Advertiser, name: "role.advertiser" },
    { id: Role.Analyst, name: "role.analyst" },
  ];

 this.receiver.dataUpdate$.subscribe((success: any) => {
      this.page = success;
      if (this.page.pageUrl) {
        this.name = this.page.pageUrl;
      } else {
        this.name = this.page._id;
      }

      this.userService.getUsers();
      this.userService.userModel().subscribe(res => {
        this.users = res;
        let id;
          this.page.roles.map(t => {
            id = t.userID
          })
          console.log(this.users);


          const userFilter = this.users.filter(user => user._id !== id);
        this.searchUsers.push(...userFilter);
//Here it filter only the last value that is added as page role
      })

And this is my code in HTML.

 <input class="form-control-sm col-md-6" [(ngModel)]="search" type="text" placeholder="Type name or email" >
     <select
     name="selectedValue"
     id="selectedValue"
     [ngModel]="privacies"
    (ngModelChange)="addRole($event)"
     class="col-md-3 form-control-sm"
     required
   >
     <option
       *ngFor="let privacy of privacies"
       [value]="privacy.id"
       (change)="addRole(privacy)"
       [selected]="privacy"
     >
       {{ privacy.name | translate}}
     </option>
   </select>
   <button class="btn btn-primary col-md-3 btn-sm" (click)="saveUserRole()">Add</button>

    </div>
     <div *ngIf="search" class="card__search">
          <div *ngFor="let f of (searchUsers | searchUser:search)" class="card__list">
            <div class="d-flex row pr-2 pl-2 align-items-center" (click)="addUser(f)">
              <img  ngx-gravatar [email]="'example@mail.com'" fallback="mp" size="35">
            <span class="pr-2 pl-2">
              {{f.firstName}} {{f.lastName}}
              <span>
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>

Leave a Comment