0

I'm using Angular 6 and ngx-datatable to display data in the table.

If the columns are known earlier, the filter works like

updateFilter(event) {
    const val = event.target.value.toLowerCase();
    // filter our data
    // update the rows
    this.rows = this.temp.filter(function (d) {
      if (d.user.name.toLowerCase().indexOf(val) !== -1 || !val) {
        return d.user.name.toLowerCase().indexOf(val) !== 1 || !val;
      } else if (d.user.email.toLowerCase().indexOf(val) !== -1 || !val) {
        return d.user.email.toLowerCase().indexOf(val) !== -1 || !val;
      }
    });
  }

But in my case, columns are dynamic and changing with data.

Here is how I extract column name from the data

 private _processData() {
    const columns = Object.keys(this.data.data[0]);

    this.columnsList = columns;

    for (const c of columns) {
      this.columns.push({
        prop: c,
        name: c.toUpperCase()
      });
    }

    this.rows = this.data.data;
    this.temp = this.data.data;
  }

Now, I want to modify the updateFilter() function to use with the dynamic column list columnsList. This is what I have done.

  updateFilter(event) {
    const val = event.target.value.toLowerCase();
    const columns = this.columnsList;
    // filter our data
    // update the rows
    this.rows = this.temp.filter(function (d) {
      for (const c of columns) {
        if (d[c].toLowerCase().indexOf(val) !== -1 || !val) {
          return d[c].toLowerCase.indexOf(val) !== -1 || !val;
        }
      }
    });
  }

But when searching for the data, it gives an error like

ERROR TypeError: "d[c].toLowerCase.indexOf is not a function"

How can I use dynamic column names to generate updateFilter() method to work effectively.

Anuj TBE
  • 9,198
  • 27
  • 136
  • 285

0 Answers0