Ytukyg

Im creating a simple customer management app and want to filter through my list! I have a gender filter and want it to display all the male/female customers when requested. I am able to do that, since I redeclare the customerArray I can practically only use it once, then have to refresh the page to use it again. There must be a way around this, ngModel maybe? Any tips are much appreciated! Below is my code!

<div class="allCustomers">

  <div class="container">

    <div class="row">

      <div class="col">

        <div class="navigation">

          <i routerLink="/homepage" routerLinkActive="active" class="fas fa-home"></i> / View Customers

        </div>

      </div>

      <div class="col">

        <div class="navbar">

          Filter:

          <div class="dropdown">

            <button class="dropbtn btn btn-outline-primary btn-sm ml-2">Gender

              <i class="fa fa-caret-down"></i>

            </button>

            <div class="dropdown-content">

              <a (click)="displayAllMale()">Male</a>

              <a (click)="displayAllFemale()">Female</a>

            </div>

          </div>

          <div class="dropdown">

            <button class="dropbtn btn btn-outline-primary btn-sm ml-2">Country

              <i class="fa fa-caret-down"></i>

            </button>

            <div class="dropdown-content">

              <a href="#">AT</a>

              <a href="#">US</a>

              <a href="#">IN</a>

              <a href="#">DE</a>

              <a href="#">TB</a>

            </div>

          </div>

        </div>

      </div>

    </div>

    <div class="row justify-content-center">

      <div>

        <h1> List of all customers: </h1>

      </div>

    </div>

    <div class="row">

      <table class="table">

        <thead>

          <tr>

            <th scope="col">#</th>

            <th scope="col">First</th>

            <th scope="col">Last</th>

            <th scope="col">Country</th>

            <th scope="col">Gender</th>

            <th scope="col">Age</th>

            <th scope="col">Edit</th>

            <th scope="col">Delete</th>

          </tr>

        </thead>

        <tbody>

          <tr *ngFor="let customer of customerArray; let i = index">

            <td>{{i + 1}}</td>

            <td>{{customer.firstname}}</td>

            <td>{{customer.lastname}}</td>

            <td>{{customer.countryCode}}</td>

            <td>{{customer.gender}}</td>

            <td>{{customer.age}}</td>

            <td><i class="fas fa-edit"></i></td>

            <td><i class="fas fa-trash-alt"></i></td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>

</div>

and here is my angular code:

customerArray: ;



  constructor(

    private http: HttpClient

  ) { }



  ngOnInit() {

    this.http.get('http://www.mocky.io/v2/5bfb15823200006d00bee442')

      .subscribe((data) => {

        this.customerArray = data;

        console.log(this.customerArray);

      }

    }



// works but not quite because customerArray get overriden



    displayAllMale() {

      let filterForMale = this.customerArray

        .filter(customer => customer.gender === "M");

      this.customerArray = filterForMale;

    }



    displayAllFemale() {

      let filterForFemale = this.customerArray

        .filter(customer => customer.gender === "F");

      this.customerArray = filterForFemale;

    }

}