Data Showing on Console but not on Component

Question

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

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);
    })    
}
}

Answer 1

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);
    })