Search/Filter functionality in a lightning table without using jquery. Response from server side will be json

Question

Json response:

{"rows":[{"vals":[{"val":"Abc Corp","cssClass":""},{"val":"GROUPA","cssClass":""},
{"val":"Eitan","cssClass":"responsiveHide"},
{"val":"9","cssClass":"responsiveHide"},
{"val":"$18.9K","cssClass":""}]}],"headers":
[{"title":"Company","isSortable":true,"dataType":"","cssClass":""},
{"title":"Customer","isSortable":false,"dataType":"","cssClass":""},
{"title":"Manager","isSortable":false,"dataType":"","cssClass":"responsiveHide"},
{"title":"Value","isSortable":false,"dataType":"","cssClass":"responsiveHide"},
{"title":"Revenue","isSortable":false,"dataType":"","cssClass":""}]}

---

Controller Function:

filter: function(component, event, helper) {
    var data = component.get("v.rowData"),// This is where I am storing the Json response
        searchTerm = component.get("v.searchText"),//getting the search keyword over here
        regex = new RegExp(searchTerm, "i"),
        results = data, regex;
    var myJSON = JSON.stringify(data);
    var test= regex.test(myJSON);//Returns true correctly
    var test1= regex.test(data);// Returns false incorrectly, I guess because it data is object(loading test data like this  var jsonData = JSON.parse(helper.testData()); component.set("v.rowData",jsonData.rows);

     results= data.filter(regex.test(myJSON));// Throws true new is not a function
//var  newdata = data.filter(word => (!searchTerm) || word.indexOf(searchTerm) > -1);//Throws an error word.indexOf is not an function
    
    //  component.set("v.sliceOfRowData", results);
}

My requirement is to perform a search and show the row if the keyword matches with any value in it. What I am expecting is to get a row/s (if the condition satisfies and set in the attribute v.sliceOfRowData and use it like this in the datatable:

<tbody>
            <aura:iteration items="{!v.sliceOfRowData}" var="row">                    
                <tr class="slds-hint-parent"> 
                    <aura:iteration items="{!row.vals}" var="col" indexVar="idx">                         
                        <td class="{!col.cssClass}">{!col.val}</td> 
                    </aura:iteration>
                </tr>
            </aura:iteration>              
        </tbody>    

Can anyone please provide some workarounds to help me with this issue? Thanks in advance.

Questions:

1. var newdata = data.filter(word => (!searchTerm) || word.indexOf(searchTerm) > -1); What is wrong here? Getting an error word.indexOf is not a function
2. What I need to do to get a row/s (if the condition satisfies and set in the attribute v.sliceOfRowData ?[![enter image description here][2]][2]

Answer 1

You cannot stringify your data to filter the data. Filter needs an Iterable object (typically an Array) to work properly. See this example I wrote for filtering.

var data = component.get("v.rowData"),
    searchTerm = component.get("v.searchText"),
    regex = new RegExp(searchTerm, "i"),
    // Find matching rows.
    results = data.rows.vals.flat().filter(row => regex.test(row.val));