1

I have followed a tutorial to create a custom search lightning component to search a list of contacts based on an event search which works fine. What I would like to achieve is to get the result of the search list and and filter this on for example a phone number.

I have a button which fires action Filter1 but currently get the error: ItemList is not defined.

enter image description here

Here is my lightning controller:

 ({
    doInit : function(component, event) {
        var action = component.get("c.findAll");
        action.setCallback(this, function(a) {
            component.set("v.contacts", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
    ,
    searchKeyChange: function(component, event) {
    var searchKey = event.getParam("searchKey");
    var action = component.get("c.findByName");
    action.setParams({
      "searchKey": searchKey
    });
    action.setCallback(this, function(a) {
        component.set("v.contacts", a.getReturnValue());
    });
    $A.enqueueAction(action);
    }
    ,
    Filter1: function(component, event) {
    var itemList = component.set("v.contacts");
    var newList = [];
    for (var item of ItemList){
     if(item.phone === '(512) 757-6000'){
    newList.push(item);
    }
    component.set('v.contacts',newList);    
    $A.enqueueAction(action);
    }}
})

Here is my component:

<aura:component controller="ContactListController">

<aura:attribute name="contacts" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="c:SearchKeyChange" action="{!c.searchKeyChange}"/>
<lightning:button label="Fire component event" onclick="{!c.Filter1}" />

<ul>
    <aura:iteration items="{!v.contacts}" var="contact">
        <li>
            <a href="{! '#/sObject/' + contact.Id + '/view'}">
                <p>{!contact.Name}</p>
                <p>{!contact.Phone}</p>
            </a>
        </li>
    </aura:iteration>
</ul>

  • Do you have a screenshot of the error in the console? – Chris Chen Jan 22 '18 at 1:23
  • what is the type of contacts, it must also be an array of contact sObject type. if you iterate it like for loop it should work.Also you need to call the function Filter1 from callback of your server call. – RedDevil Jan 22 '18 at 1:24
  • @ChrisChen I added the screenshot I get pressing the button – Thomas Jan 22 '18 at 1:27
  • @RedDevil The searchKeyChange already gives the result from the server isnt the value of the list on the clientside where I can reuse the value of the generated list to filter this again? – Thomas Jan 22 '18 at 1:30
3

JavaScript is case sensitive. Make sure you pay attention to your uppercase and lowercase letters:

for (var item of itemList){
  • Thanks for this part I also changed to component.get. How do I pass this back to the component? – Thomas Jan 22 '18 at 4:56
  • @Thomas component.set sets the value, component.get gets the value. As written (with the change to get and itemList), it should work. – sfdcfox Jan 22 '18 at 5:00
  • I bump into: action is not defined or should I ask this as a separate issue? – Thomas Jan 22 '18 at 5:06
  • @Thomas take that line out. I just realized it was there when you said something. $A.enqueueAction is for calling the server, which you're not doing here. – sfdcfox Jan 22 '18 at 5:07
  • Thanks the errors are gone but no return of a new list value – Thomas Jan 22 '18 at 5:13
2
var itemList = component.get("v.contacts");

Change set to get, How about now?

  • I am still getting the same error. – Thomas Jan 22 '18 at 2:22

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.