Angular 6 filter table with checkboxes

Question

I have this working snippet. I want to filter a table using checkboxes. The problem is when I check a for example, it gives me the filtered array. But when I uncheck it, I want to return me the original array.

.html

<ng-container *ngFor="let group of groups">
    <label class="btn btn-filter" id="bttns">
    <input type="checkbox" name="customersGroupFilter" autoComplete="off" [value]="group" (change)="changeGroup($event)">
    {{ group }}
  </label>&nbsp;
</ng-container>

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Group</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of newArray">
      <td>{{user.name}}</td>
      <td>{{user.group}}</td>
    </tr>
  </tbody>
</table>

.ts

  changeGroup(event) {
    const group = event.target.value;
    const index = this.groupValue.indexOf(group);

    if (index > -1) {
      this.groupValue.splice(index, 1);
    } else {
      this.groupValue.push(group);
    }

    this.transform(this.usersList, 'group', this.groupValue)
  }

  transform(items: any[], field: string, value: string[]): any[] {
    console.log(value)
    if (!items) {
      return [];
    }
    if (!field || !value || value.length <= 0) {
      return items;
    }

    this.newArray = items.filter(singleItem => {
      return (singleItem != null && singleItem[field] != null && singleItem[field] != undefined && value.indexOf(singleItem[field]) >= 0);
    });

    return this.newArray
  }

How can I modify this code in order to obtain what I want?

I tried something with a condition like this in changeGroup()

if (this.groupValue.length == 0) {
   this.transform(this.usersList, '', this.groupValue)
}

Also, is this a good way to filter a table? I tried avoiding pipe filters. Thank you for your time!

Java != Javascript ...

UninformedUser
– UninformedUser

2018-12-05 11:36:52 +00:00
Commented Dec 5, 2018 at 11:36 — UninformedUser
– UninformedUser, Commented Dec 5, 2018 at 11:36
Oups, my mistake! I wasn't paying attention :D modified.

Tenzolinho
– Tenzolinho

2018-12-05 11:37:30 +00:00
Commented Dec 5, 2018 at 11:37 — Tenzolinho
– Tenzolinho, Commented Dec 5, 2018 at 11:37

Joel Pierre · Accepted Answer · 2018-12-06 11:58:53Z

1

UPDATED!!

You are deleting items from the original Array therefore you no longer have the data.

You can use an immutable approach so using a spread operator create a new version of that array which you then splice and then when the checkbox is unchecked you reset the array back to the original value.

originalArray = [1,2,3,4]
newArray = [...array]

I would then do an ngFor using the newArray variable and not the original variable, this means your table will react to the modified array but you will always have the originalArray as a reference.

Below is an updated snippet of the transform method.

transform(items: any[], field: string, value: string[]): any[] {

    if (!items) {
      return [];
    }

    if (!field || !value || value.length <= 0) {
      return this.newArray = [...this.usersList.slice()];
    }

    this.newArray = items.filter(singleItem => {
      return (singleItem != null && singleItem[field] != null && singleItem[field] != undefined && value.indexOf(singleItem[field]) >= 0);
    });

    return this.newArray
  }
}

edited Dec 6, 2018 at 11:58

answered Dec 5, 2018 at 11:46

Joel Pierre

1211 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tenzolinho Over a year ago

I did a copy of the original array, but it's not working. Can you please take a look at my code? Because I don't understand much from yours.

Joel Pierre Over a year ago

Sure let me do that for you

Mr. Wizard · Accepted Answer · 2018-12-05 12:11:24Z

0

try changing like this, this should work.

...
if (this.groupValue.length == 0) {
  this.transform(this.usersList, '', this.groupValue)
}
...

...
if (!field || !value || value.length <= 0) {
    this.newArray = this.usersList.slice()
    return this.newArray
}
...

answered Dec 5, 2018 at 12:11

Mr. Wizard

1,1931 gold badge12 silver badges19 bronze badges

1 Comment

Tenzolinho Over a year ago

If I use more filters at the time, it won't work anymore.

Collectives™ on Stack Overflow

Angular 6 filter table with checkboxes

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related