My application involves an array of filters containing the name, operator, and value:
[{name="pricing.price", op="gte", value=10000}, {name="pricing.price", op="gte", value=10000}]
After applying these filters and refreshing the page, the last set of filters is saved in this.savedFilters. Users can then add new filters or modify existing ones.
Adding new filters works perfectly, but modifying existing filters does not function as expected.
I have created a function that partially fulfills the job. It updates the value once when first run, but subsequent updates do not affect anything.
You can view the issue on JSFiddle: https://jsfiddle.net/cdr8btwe/
//if there are no saved filters, the new filters are the final filters
if (!this.savedFilters) {
this.finalFilters = this.freshFilters;
} else {
//concat the new & saved filters & move into a temp array
this.tempArrayOfFilters =
this.freshFilters.concat(this.savedFilters);
//forEach loop to check
this.tempArrayOfFilters.forEach((value) => {
const key = value['name'] + '_ ' + value['op'];
if (this.mapping[key]) {
} else {
this.finalFilters.push(value);
this.mapping[key] = true;
}
});
}
console.log('finalFilters:', this.finalFilters);
[
{name:"pricing.price",op:"gte",value:1234}, {name:"pricing.price",op:"lte",value:1111}
]
When attempting to modify saved filters with:
this.freshfilters = [{"name":"pricing.price","op":"gte","value":5678},
{"name":"pricing.price","op":"gte","value":9999}]
The output currently shows:
[{name:"pricing.price", op:"gte", value:1234},
{name:"pricing.price", op:"lte", value:1111}]
However, the desired output should be:
[{name:"pricing.price",op:"gte",value:5678},{name:"pricing.price",op:"lte",value:9999}]
This is because if the name and operator are the same, only the value should be updated.