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.