LWC: Lightning datatable not displaying the data stored in localstorage

Question

My requirement is to pass selected accounts on Opportunity Record page to Opportunity Product Record Page. I have two LWC created for each page. From Opportunity Record page I'm storing the selected Accounts in local storage and then retrieving it on Opportunity Product Page.

Please find the code:

Opportunity LWC:

export default class OpportunityLWC extends NavigationMixin(LightningElement) {
   
    //Get Selected Checkbox for SAP Accounts 
    handleRowSelection(event) {
        var selectedRows=event.detail.selectedRows;
        this.selectedSapAccounts = JSON.stringify(selectedRows); 
        
        console.log('selectedSAPAccounts------>' + this.selectedSapAccounts);

        //Set LocalStorage 
        localStorage.setItem('SelectedSAPAccountsDetails', this.selectedSapAccounts);
    
        if(selectedRows.length === 0){
            this.disabled = true;
        }else{
            this.disabled = false;
        }
    }

}

Opportunity Product LWC JS:

export default class OpportunityProductLWC extends LightningElement {
    
//Need help here to display the JSON stored in this.localStorageSelectedSAPAccountDetails to display in lightning datatable

accountColumns = [
        {
            label: 'SAP Account Name',
            fieldName: 'sapAccount',
            type: 'url',
            typeAttributes: {label: { fieldName: 'sapAccname' }, target: '_blank'}
        },
        { label: 'SAP Account Number', fieldName: 'sapAccountNumber', type: 'string'},
        { label: 'Quantity', type: 'text', fieldName: 'splitQuantityValue'}
    ];

 connectedCallback(){
 //Retrieve the localStorage Values 
        this.retrieveLocalStorage();
}

retrieveLocalStorage(){
        
        if(localStorage.getItem('SelectedSAPAccountsDetails')){
            //An Id key is in the local Storage
            this.localStorageSelectedSAPAccountDetails = localStorage.getItem('SelectedSAPAccountsDetails');

            //Retrieve the data and parse it back to JSON
            console.log('localstorage--->' + this.localStorageSelectedSAPAccountDetails);
            
            this.sapAccounts = this.localStorageSelectedSAPAccountDetails;

            //Clear local storage after getting the values
            localStorage.clear();
        }

         
    }

}

Opportunity Product HTML

<template>
    <div>
        <lightning-card title="">
          <div class="slds-p-around_xx-small">
              <lightning-datatable
                  key-field="Id"
                  data={sapAccounts}
                  onrowselection={handleRowSelection}
                  onsave={handleSave}
                  draft-values={saveDraftValues}
                  hide-checkbox-column="true" 
                  show-row-number-column="true"
                  columns={accountColumns}>
              </lightning-datatable>
          </div>
        </lightning-card>
      </div>
</template>

Please find the JSON stored in local storage which is retrieved on Opportunity Product Page:

[{"Id":"a055e000005IpoOAAS","Name":"COUNTRY OVEN BAKERY - CU","Type__c":"Ship-To","Division__c":"68","Account__c":"0015e00000cWZmMAAW","AccountName":"/a055e000005IpoOAAS"},{"Id":"a055e000005IpoPAAS","Name":"COUNTRY OVEN BAKERY","Type__c":"Ship-To","Division__c":"74","Account__c":"0015e00000cWZmMAAW","AccountName":"/a055e000005IpoPAAS"}]

I'm new to LWC and would need help to display the JSON in the lightning datatable.

Any kind of help is appreciated.

Thank you.

Answer 1

You are storing the rows as a string - and you even turn the rows into a string here:

this.selectedSapAccounts = JSON.stringify(selectedRows); 

So you need to turn that string back to an Array on retrieval:

let localDetails = localStorage.getItem('SelectedSAPAccountsDetails');
this.sapAccounts = JSON.parse(localDetails);