1

<aura:component controller="DisplayconsClass">
    <aura:attribute type="Contact[]" name="consList"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>     
         <lightning:datatable  keyField="id" data="{!v.consList}" columns="{!v.mycolumns}" hideCheckboxColumn="true" />

</aura:component>

//controller

({
    init : function(component, event, helper) {

        helper.fetchContacts(component, event, helper);
    }
})

Helper:


({
    fetchContacts: function(component, event)

    {

        component.set('v.mycolumns', [{
                label: 'First Name',
                fieldName: 'firstName',
                type: 'text'
            },
            {
                label: 'Last Name',
                fieldName: 'lastname',
                type: 'text'
            }

        ]);


        var action = component.get("c.fetchCons");

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === "SUCCESS") {

                var records = response.getReturnValue();

                component.set("v.consList", records);

            }
        });

        $A.enqueueAction(action);
    }
})

Output:

enter image description here

Apex controller:

public class DisplayconsClass {

    @AuraEnabled
    public static List <contact> fetchCons() {

        return [ SELECT firstName, lastname FROM contact LIMIT 10 ];

    }

}
  • Hi Nishanth - can you please add the Apex controller code as well? Also, it would be helpful to make the code more readable (less spacing and less newlines) – Brian Miller Apr 28 at 20:29
  • @BrianMiller: Added the apex controller. – Nishanth Apr 28 at 20:52
3

Field names are cAsE-sEnSiTiVe. It should be FirstName and LastName, not firstName and lastname. You must use the case from their API name, not however you've written it in your Apex code query.


    component.set('v.mycolumns', [{
            label: 'First Name',
            fieldName: 'FirstName',
            type: 'text'
        },
        {
            label: 'Last Name',
            fieldName: 'LastName',
            type: 'text'
        }

    ]);
0
  1. Change the apex controller to the following:

    public class DisplayconsClass {

    @AuraEnabled public static List fetchCons() { List listToReturn = new List();
    List tempList = SELECT firstName, lastname FROM contact LIMIT 10 ];

         for(Contact temp : tempList){
            CotactWrapper tempWrap = new ContactWrapper();
            tempWrap.firstName = temp.firstName;
            tempWrap.lastname = temp.lastname;
            listToReturn.add(tempWrap);
         }
         return ListToReturn;
    }
    
    public class ContactWrapper{
        @AuraEnabled public String firstName;
        @AuraEnabled public String lastname;
    }
    

    }

  2. In your JavaScript controller change to the following code:

    if (state === "SUCCESS") {
           var records = response.getReturnValue();
           var toJson = JSON.stringify(records);
           component.set("v.consList", toJson);
    
    }
    

Tbh I'm not sure whether it's JSON.stringify or JSON.parse so just try both.

  1. in the component change the attribute:
<aura:attribute type="Object" name="consList"/>

or Object[]

  • You wouldn't use JSON.stringify or JSON.parse. The return value is already a list of objects. – sfdcfox Apr 28 at 22:45
  • @sfdcfox I think you have to. That the way to match between the fieldName of the column to the attribute of the wrapper class, no? – Derminal Apr 28 at 22:51
  • The Aura framework takes care of converting your wrapper to native objects in JavaScript automatically. The only reason you'd need JSON.parse is if you returned a JSON string originally. – sfdcfox Apr 28 at 22:53
  • @sfdcfox Got your point, the problem was about case-sensitive. Thanks for your input. – Derminal Apr 28 at 22:54
  • It was the case sensitive issue and thank you @sfdcfox – Nishanth May 1 at 22:39

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.