Cannot populate data in lightning data table
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}
<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:
Apex controller:
public class DisplayconsClass {
@AuraEnabled
public static List <contact> fetchCons() {
return [ SELECT firstName, lastname FROM contact LIMIT 10 ];
}
}
lightning datatable
New contributor
add a comment |
<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:
Apex controller:
public class DisplayconsClass {
@AuraEnabled
public static List <contact> fetchCons() {
return [ SELECT firstName, lastname FROM contact LIMIT 10 ];
}
}
lightning datatable
New contributor
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
add a comment |
<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:
Apex controller:
public class DisplayconsClass {
@AuraEnabled
public static List <contact> fetchCons() {
return [ SELECT firstName, lastname FROM contact LIMIT 10 ];
}
}
lightning datatable
New contributor
<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:
Apex controller:
public class DisplayconsClass {
@AuraEnabled
public static List <contact> fetchCons() {
return [ SELECT firstName, lastname FROM contact LIMIT 10 ];
}
}
lightning datatable
lightning datatable
New contributor
New contributor
edited 2 hours ago
Nishanth
New contributor
asked 3 hours ago
NishanthNishanth
62
62
New contributor
New contributor
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
add a comment |
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
add a comment |
2 Answers
2
active
oldest
votes
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'
}
]);
Thank you so much .. it worked.
– Nishanth
57 mins ago
add a comment |
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;
}
}
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.
- 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
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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'
}
]);
Thank you so much .. it worked.
– Nishanth
57 mins ago
add a comment |
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'
}
]);
Thank you so much .. it worked.
– Nishanth
57 mins ago
add a comment |
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'
}
]);
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'
}
]);
answered 1 hour ago
sfdcfoxsfdcfox
267k13213461
267k13213461
Thank you so much .. it worked.
– Nishanth
57 mins ago
add a comment |
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
add a comment |
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;
}
}
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.
- 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
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
add a comment |
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;
}
}
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.
- 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
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
add a comment |
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;
}
}
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.
- in the component change the attribute:
<aura:attribute type="Object" name="consList"/>
or Object
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;
}
}
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.
- in the component change the attribute:
<aura:attribute type="Object" name="consList"/>
or Object
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
add a comment |
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
add a comment |
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.
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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