Cannot populate data in lightning data table





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}







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

}

}









share|improve this question









New contributor




Nishanth is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





















  • 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
    3 hours ago











  • @BrianMiller: Added the apex controller.

    – Nishanth
    2 hours ago


















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

}

}









share|improve this question









New contributor




Nishanth is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





















  • 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
    3 hours ago











  • @BrianMiller: Added the apex controller.

    – Nishanth
    2 hours ago














1












1








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

}

}









share|improve this question









New contributor




Nishanth is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.













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

}

}






lightning datatable






share|improve this question









New contributor




Nishanth is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











share|improve this question









New contributor




Nishanth is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









share|improve this question




share|improve this question








edited 2 hours ago







Nishanth













New contributor




Nishanth is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









asked 3 hours ago









NishanthNishanth

62




62




New contributor




Nishanth is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





New contributor





Nishanth is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.






Nishanth is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.













  • 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
    3 hours ago











  • @BrianMiller: Added the apex controller.

    – Nishanth
    2 hours ago



















  • 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
    3 hours ago











  • @BrianMiller: Added the apex controller.

    – Nishanth
    2 hours ago

















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
3 hours ago





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
3 hours ago













@BrianMiller: Added the apex controller.

– Nishanth
2 hours ago





@BrianMiller: Added the apex controller.

– Nishanth
2 hours ago










2 Answers
2






active

oldest

votes


















2














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

]);





share|improve this answer
























  • Thank you so much .. it worked.

    – Nishanth
    57 mins ago



















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






share|improve this answer


























  • You wouldn't use JSON.stringify or JSON.parse. The return value is already a list of objects.

    – sfdcfox
    1 hour ago













  • @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
    57 mins ago











  • 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
    54 mins ago











  • @sfdcfox Got your point, the problem was about case-sensitive. Thanks for your input.

    – Derminal
    54 mins ago














Your Answer








StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "459"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});






Nishanth is a new contributor. Be nice, and check out our Code of Conduct.










draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f260352%2fcannot-populate-data-in-lightning-data-table%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









2














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

]);





share|improve this answer
























  • Thank you so much .. it worked.

    – Nishanth
    57 mins ago
















2














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

]);





share|improve this answer
























  • Thank you so much .. it worked.

    – Nishanth
    57 mins ago














2












2








2







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

]);





share|improve this answer













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

]);






share|improve this answer












share|improve this answer



share|improve this answer










answered 1 hour ago









sfdcfoxsfdcfox

267k13213461




267k13213461













  • Thank you so much .. it worked.

    – Nishanth
    57 mins ago



















  • Thank you so much .. it worked.

    – Nishanth
    57 mins ago

















Thank you so much .. it worked.

– Nishanth
57 mins ago





Thank you so much .. it worked.

– Nishanth
57 mins ago













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






share|improve this answer


























  • You wouldn't use JSON.stringify or JSON.parse. The return value is already a list of objects.

    – sfdcfox
    1 hour ago













  • @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
    57 mins ago











  • 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
    54 mins ago











  • @sfdcfox Got your point, the problem was about case-sensitive. Thanks for your input.

    – Derminal
    54 mins ago


















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






share|improve this answer


























  • You wouldn't use JSON.stringify or JSON.parse. The return value is already a list of objects.

    – sfdcfox
    1 hour ago













  • @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
    57 mins ago











  • 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
    54 mins ago











  • @sfdcfox Got your point, the problem was about case-sensitive. Thanks for your input.

    – Derminal
    54 mins ago
















0












0








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






share|improve this answer

















  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







share|improve this answer














share|improve this answer



share|improve this answer








edited 1 hour ago

























answered 1 hour ago









DerminalDerminal

1135




1135













  • You wouldn't use JSON.stringify or JSON.parse. The return value is already a list of objects.

    – sfdcfox
    1 hour ago













  • @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
    57 mins ago











  • 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
    54 mins ago











  • @sfdcfox Got your point, the problem was about case-sensitive. Thanks for your input.

    – Derminal
    54 mins ago





















  • You wouldn't use JSON.stringify or JSON.parse. The return value is already a list of objects.

    – sfdcfox
    1 hour ago













  • @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
    57 mins ago











  • 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
    54 mins ago











  • @sfdcfox Got your point, the problem was about case-sensitive. Thanks for your input.

    – Derminal
    54 mins ago



















You wouldn't use JSON.stringify or JSON.parse. The return value is already a list of objects.

– sfdcfox
1 hour ago







You wouldn't use JSON.stringify or JSON.parse. The return value is already a list of objects.

– sfdcfox
1 hour ago















@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
57 mins ago





@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
57 mins ago













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
54 mins ago





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
54 mins ago













@sfdcfox Got your point, the problem was about case-sensitive. Thanks for your input.

– Derminal
54 mins ago







@sfdcfox Got your point, the problem was about case-sensitive. Thanks for your input.

– Derminal
54 mins ago












Nishanth is a new contributor. Be nice, and check out our Code of Conduct.










draft saved

draft discarded


















Nishanth is a new contributor. Be nice, and check out our Code of Conduct.













Nishanth is a new contributor. Be nice, and check out our Code of Conduct.












Nishanth is a new contributor. Be nice, and check out our Code of Conduct.
















Thanks for contributing an answer to Salesforce Stack Exchange!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f260352%2fcannot-populate-data-in-lightning-data-table%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

What are all the squawk codes?

What are differences between VBoxVGA, VMSVGA and VBoxSVGA in VirtualBox?

Hudsonelva