0

I am new to salesforce, I am trying to learn lightning datatable with imperative call in salesforce. I am unable to get the data in the column, its not throwing any error though. Please help to fix it. Below is the code:

''' HTML Code:

<template>
    <lightning-datatable
    key-field="Id"
    data={result}
    columns={columns}></lightning-datatable>
</template>

''' Javascript:

import { LightningElement, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getData';

const columns = [
    { label: 'First Name', fieldName: 'FirstName' },
    //{ label: 'Last Name', fieldName: 'LastName' },
    //{ label: 'Email', fieldName: 'Email', type: 'email' },
];

export default class DataTableWithImperativeCall extends LightningElement {
    @track result=[];
    @track columns = columns;
    connectedCallback() {
        this.getResults();
    }

    getResults() {
        getContactList()
            .then(cdata => {
                //console.log(cdata);
                console.log(JSON.stringify(cdata));
                let finalData=[];
                for(var i=0;i<cdata.length;i++)
                {
                    finalData.push(cdata[i].FirstName);
                }
                this.result=finalData;
                //console.log('results'+JSON.stringify(this.result));
            })
            .catch(error => {
                this.errors = error;
            });

    }
}

''' Apex Class:

public with sharing class ContactController {
    @AuraEnabled
    public static list<contact> getData()
    {
        return [select id,firstName,LastName,email from contact order by firstName asc nulls last limit 10];
    }
}

'''

2
  • Please find the html code below, as its not showing up for me in the body- <template> <lightning-datatable key-field="Id" data={result} columns={columns}></lightning-datatable> </template> Dec 4, 2020 at 2:37
  • Please use the tools in the editor to format your code. You can wrap each code block in ``` (triple backticks, on a line by themselves) to do this. You can make an edit to update your post.
    – David Reed
    Dec 4, 2020 at 3:44

1 Answer 1

1

In LWC Datatable pushing data to array using push method does not trigger any change in UI. You will have to reassign the data to array with = operator.

let finalData = [];
for (var i = 0; i < cdata.length; i++) {
    finalData.push(cdata[i].FirstName);
}
this.result = finalData;

To know more on this please check here

6
  • Thanks for your answer Nagendra, I have modified the code as you suggested but it fixed half of the problem. I am now getting empty rows displayed but no data in it. Not sure what is causing this. Dec 4, 2020 at 19:06
  • can you please update your code above in your question, also a sample of cdata would help. Also make sure your object key matches the label name you specified. Dec 4, 2020 at 19:15
  • I have added the updated code in the question, also checked the label name which is matching with object key. Thank you. Dec 4, 2020 at 20:20
  • My code was just an example, you will still need to build a list of object in js, and each object with a property as FirstName Dec 5, 2020 at 0:51
  • 1
    Thanks Nagendra, I am able to fix the problem. I have added the code and able to get the data on the UI. Thanks for your suggestions.{ finalData.push({FirstName:cdata[i].FirstName,LastName:cdata[i].LastName,Email:cdata[i].Email}); } Dec 5, 2020 at 3:38

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.