+ Start a Discussion
Saravana Bharathi 1Saravana Bharathi 1 

Lightning - Rendering is not working

Hi All,

I am a newbie to Lightning component Development.

I have written a lightning component, which holds Text Input, and a button.
When User enters some text in the text field, by clicking a button. I am calling a javascript controller, then to Javascript Handler, then to Apex Controller. I am searching and returning the result to handler, to javascript handler and then to component attribute values.

I am setting Response to Component attribute in Handler.

I am not getting the response in UI. When I debugged using Lightning Inspector - Chrome Extensions, Actions are successful, and I am getting result in the attributes.

Please let me know, whether i am missing anything.

Thanks in advance.
Best Answer chosen by Saravana Bharathi 1
parthiban oslparthiban osl
Hi Saravana 

Kindly add the below changes

var outputList = a.getReturnValue();
//expenses.push(a.getReturnValue());                 
for(var key in outputList){
     console.log(outputList[key].Name);
     expenses.push(outputList[key]);
}

List of contacts are displayed in the Lightning App as expected

Let me know any queries

Thanks & Regards
Parthiban OSL
Website:- https://parthibanosl.wordpress.com
Mail:- parthibanosl@gmail.com

All Answers

Dev BoorlaDev Boorla
Hi,
Did you check FLS? Also, looking at code would be helpful.

Best,
Dev
Saravana Bharathi 1Saravana Bharathi 1
I am logging as System admin, I have access to the field.

Attaching my code for your reference.

Component:

<aura:component controller="FirstController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <ltng:require styles="/resource/slds090/assets/styles/salesforce-lightning-design-system.min.css"/>
    <aura:attribute name="entervalue" type="string" />
    <aura:attribute name="listOfContacts" type="Contact[]" />    
    <ui:inputText label="Enter some text" value="{!v.entervalue}" />
<ui:button label="Submit" press="{!c.searchtext}"/>
    <aura:renderif isTrue="true">
<aura:iteration items="{!v.listOfContacts}" var="contactvalue">
    {!contactvalue.Id}
    </aura:iteration>
</aura:renderif>        
</aura:component>


Javascript Controller

({
    searchtext : function(component,event,helper) {
        helper.searchMethod(component);
    }
})


Helper 

({
    searchMethod : function(component) {
        var enteredvalue = component.get("v.entervalue");
        alert('What is the value '+enteredvalue);
        this.searching(component,enteredvalue,function(a)
               {
        var expenses = component.get("v.listOfContacts");
        expenses.push(a.getReturnValue());                   
component.set("v.listOfContacts",expenses);
               })
        
    },
    searching : function(component,enteredvalue,callback)
    {
        alert('Before calling controller');
        var action = component.get("c.getSearchResult");
        action.setParams({"enteredvalue":enteredvalue});        
        if(callback)
        {
            action.setCallback(this, callback);
        }
        $A.enqueueAction(action);
    }
    
})

Apex Controller:

public class FirstController 
{
    @AuraEnabled
    public static List<Contact> getSearchResult(String enteredvalue)
    {
        List<Contact> listOfContacts = [Select Id,Name From Contact Where Name=:enteredvalue];
        System.debug('Is it coming inside '+listOfContacts);
        return listOfContacts;
    }
}
Dev BoorlaDev Boorla
Hi,
Change the below line in the helper class. 
component.set("v.listOfContacts",a.getReturnValue());

Best,
Saravana Bharathi 1Saravana Bharathi 1
Thanks for help.

In these lines, I am trying to add to existing list to show in UI.
For example: For 1st time, when user enters search text and clicks search , listofcontacts will have 3 element, with the same search text, if user clicks search again, listofcontact will have 6 elements.

var expenses = component.get("v.listOfContacts");
expenses.push(a.getReturnValue());                   
component.set("v.listOfContacts",expenses);

Whereas, you have given the lines to set the updated result to the List to show it in UI. It will be overridden. For the same example, it will show always 3 in the listofContacts.

Can you explain, what is problem in those three lines.

Thanks
Dev BoorlaDev Boorla
Hi,
Apologies for not understanding your use case properly. Nevertheless, the issue seems to be with expenses.push(). After the push, the resulting Array Object contains a Contact Object + Array of Contact Obj and hence not rendering properly in UI 

Expenses before push is -->[{"Id":"003F000001RDGkoIAH","Name":"Jack Rogers"}]
Expenses after push is -->[{"Id":"003F000001RDGkoIAH","Name":"Jack Rogers"},[{"Id":"003F000001RDGkoIAH","Name":"Jack Rogers"}]]

Best,
Saravana Bharathi 1Saravana Bharathi 1
Thanks Dev Boorla,
In VF page, it's easy to maintain variable value and we can add to it.
In lightning, Can't we achieve this?
Thanks 
parthiban oslparthiban osl
Hi Saravana 

Kindly add the below changes

var outputList = a.getReturnValue();
//expenses.push(a.getReturnValue());                 
for(var key in outputList){
     console.log(outputList[key].Name);
     expenses.push(outputList[key]);
}

List of contacts are displayed in the Lightning App as expected

Let me know any queries

Thanks & Regards
Parthiban OSL
Website:- https://parthibanosl.wordpress.com
Mail:- parthibanosl@gmail.com
This was selected as the best answer