I have a simple component that calls an apex method which returns some records. I want to display them. The problem is when I fetch the records and add them into the array, the component does not refresh. After some research I belive I need to bind "this" but since i'm new to js, i'm not sure what that means.

    <lightning-card title="Date" icon-name="standard:record">  
        <lightning-datatable columns={columns} 


import { LightningElement,api, track, wire } from 'lwc';
import populateData from '@salesforce/apex/ApexClass.Data';

export default class RelatedListEventOrder extends LightningElement {
    @api recordId;
    @track columns = [
            label: 'Account Name',
            fieldName: 'accountname', 
            type: 'text',
        }, {
            label: 'Status',
            fieldName: 'Status',
            type: 'text'
        }, {
            label: 'Delivered',
            fieldName: 'delivered',
            type: 'boolean'

    @track data = [
            accountname: 'a',
            delivered: true,
            status: 'good'
    connectedCallback() {
        window.console.log("In connectedCallback");

    eventOrders() {
        window.console.log("this.recordId: " + this.recordId);
        populateData({ recordId: this.recordId })
            .then((resWrapper) => {
                window.console.log("resWrapper: " + resWrapper);
                    window.console.log("resWrapper length: " + resWrapper.length);
                    resWrapper.forEach((res) => {
                        window.console.log("res.order.Account.Name: " + res.order.Account.Name);
                        window.console.log("res.order.Delivered__c: " + res.order.Delivered__c);
                        window.console.log("res.order.Status: " + res.order.Status);

                        let lineItem = {};
                        lineItem.accountname = res.order.Account.Name,
                        lineItem.delivered = res.order.Delivered__c,
                        lineItem.status = res.order.Status,
                        window.console.log("========lineItem acc name:====== " +lineItem.accountname);
                window.console.log("data.length: " + this.data.length);
            .catch((error) => {
                this.error = error;
                window.console.log("Error: " + error);


The records return fine from apex as I can view then in the console. And lineItem is also populated. My question is when I add them to data, why is the component not reflecting this change? I have a feeling it is because "this" is not set correctly but I am unsure how to fix.

3 Answers 3


LWC data binding doesn't detect a call to push.

make an intermediate variable, and push to that array, then assign it to the data array right at the end. eg:

let temp = [];
//ect ect
this.data = temp;
  • Brilliant. Thanks you Caspar! I didn't realize that
    – M guy
    Aug 23, 2021 at 9:54

Just had this same issue I find a better way of dealing with this even though I still hate that you have to do it, is:

this.data = this.data.slice();

As slice returns a shallow copy it kicks datatable enough to do something.


You can also use the spread operators(...) instead of creating a temp variable after pushing the new element in the array. It is a widely accepted solution.

this.data = [...this.data];

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .