Toggling Between Filtered And Non-filtered List

I am trying to filter out records that don't have investment amount. If you see the JSON structure , I am trying to filter the FundClassDetailsViewModel object. I am sending this d

Solution 1:

tl;dr - You need to do a deep copy of data to isolate the references of the two objects, this.TermDetails and this.OriginalList.

Change this

this.TermDetails = data;this.OriginalList = data;

to this

this.TermDetails = data;this.OriginalList = JSON.parse(JSON.stringify(data);

Explanations

In Javascript, Objects are passed by reference, so this.TermDetails and this.OriginalList points to the same object.

this.TermDetails.FundClassViewModel.FundDetailsViewModel.forEach(funDetail=> {
    funDetail.FundClassDetailsViewModel = funDetail.FundClassDetailsViewModel
        .reduce((prev, next) => prev = prev.concat(next), [])
        .filter(obj => obj.InvestedAmount !== null);
    });

When you mutate one of the nested objects (the this.TermDetails.FundClassViewModel.FundDetailsViewModel array in your case) in one of them, the changes are reflected in both objects (the array is filtered in both objects).