Data Showing on Console but not on Component

jslightning-web-components

if i select one or more than one checkbox then their account records should be show on subscriber component
enter image description here

Here is the Code ====HTML====

    <template>  
        <lightning-card  variant="Narrow"  title="AccountCheckboxsubscriber" icon-name="standard:account">
            <p> AccountCheckboxsubscriber </p> <br>
        <template for:each={accc} for:item="acc">                
            <lightning-card key={acc.Id} title={acc.Name} icon-name="standard:case">
              <div class="slds-m-around_medium">
              Account Name:  {acc.Name} </br>
              Type: {acc.Type} </br>
              Website: {acc.Website} </br>    
            </div> 
            </lightning-card>
        </template>
        </lightning-card>
    </template>

=======JS========

import { LightningElement,track,wire } from 'lwc';
import { registerListener } from 'c/pubsub';
import { CurrentPageReference } from 'lightning/navigation';
import getAccountss from '@salesforce/apex/AccountCheckboxLWC.getAccountss';

export default class AccountCheckboxsubscriber extends LightningElement {
    @wire(CurrentPageReference) pageRef;
    
    @track accountvalues;
    @track error;
    @track accc = [];
    
connectedCallback() {
    // subscribe to eventdetails event
    registerListener('eventdetails', this.accDetails, this);
}

accDetails(data){
    this.accountvalues = data;
    console.log('>>>>>accountvalues '+this.accountvalues);

// for fetching account Records 

getAccountss({accountId:this.accountvalues})
    .then(result=>{
        console.log('result--'+JSON.stringify(result));
        this.accc.push(result);
        console.log('>>>this.accc '+JSON.stringify(this.accc));

    })
    .catch(error=>{
        console.log('Error--'+error);
    })    
}
}

Best Answer

getAccountss returns a list of Account, so pushing the result in accc array results in an array of array. Indeed the console log shows:

this.accc
[
   [
        {"Id": "0012...", "Name": "qwertgvc", "Type": "Prospect", ... }
   ]
]

Therefore the item acc in the template holds an array, that has no properties like Name, Type and Website, so you see nothing.

You could use Spread syntax (...) when pushing the result of getAccountss methods into accc to have a flat array:

getAccountss({accountId:this.accountvalues})
    .then(result=>{
        console.log('result--'+JSON.stringify(result));
        this.accc.push(...result); // Applied spread syntax here
        console.log('>>>this.accc '+JSON.stringify(this.accc));

    })
    .catch(error=>{
        console.log('Error--'+error);
    })
Related Topic