Json response:

{"rows":[{"vals":[{"val":"Abc Corp","cssClass":""},{"val":"GROUPA","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:

            <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> 

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


  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]
  • can you please explain what is not working? – glls May 14 '19 at 21:42
  • @glls As i have mentioned in the comments, this line is throwing an errror stating word.indexOf is not an function: var newdata = data.filter(word => (!searchTerm) || word.indexOf(searchTerm) > -1); Also can you please give me any idea on what I need to do to get a row/s (if the condition satisfies) and set in the attribute v.sliceOfRowData – Arjun May 14 '19 at 21:54
  • sry, but given the amount of comments in your code, it does not catch one attention immediately, you should higlight the actuall issue at the beggining of your post. – glls May 15 '19 at 0:29

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));
| improve this answer | |
  • Thanks @sfdcfox. Yes I was doing it wrong. I have included a new screenshot to illustrate what I see with the structure of data. data[0].vals.flat() is giving me an array of val. I am little new to this lightning and js. Can you tell me how do I iterate over it? – Arjun May 14 '19 at 23:28
  • @Arjun filter should return the list of matching values already. – sfdcfox May 14 '19 at 23:36
  • A little change in the iteration process did the rest. Thanks for your help. "Filter needs an Iterable object (typically an Array) to work properly" was the saviour. Thanks again – Arjun May 15 '19 at 13:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.