[SalesForce] LWC Wiring apex method returns [object Object]

I'm trying to display the account of the logged in community user. Right now i'm only trying to display the Id but it's returning [object Object]. Maybe i'm not going about it the right way.
Here is the code:

JS

import { LightningElement, wire } from 'lwc';

import getAccountByCommunityUser from '@salesforce/apex/AccountController.getAccountByCommunityUser';
import userId from '@salesforce/user/Id';

export default class PracticeCard extends LightningElement {

    @wire(getAccountByCommunityUser, {Id: userId})
    accounts;

    get accId() {
        return this.accounts.data.fields.Id.value;
    }
}

HTML

<template>
<lightning-card title='Accounts' icon-name='standard:account'>
    <div class='slds-m-around_medium'>
        <template if:true={accounts.data}>
            <li key={accounts.accountId}>
                {accounts.accountId}
            </li>
        </template>
        <template if:true={accounts.error}>
            {accounts.error}
        </template>
    </div>
</lightning-card>
</template>

Apex method

public with sharing class AccountController {

   @AuraEnabled(cacheable = true)
   public static List<Account> getAccountByCommunityUser(String Id) {
       Id communityUserContactId = [SELECT Id, Name, ContactId FROM User WHERE Id = :Id].ContactId;
       Id userContact = [SELECT Id, AccountId FROM Contact WHERE Id = :communityUserContactId].AccountId;
      return [SELECT Id, Name FROM Account WHERE Id = :userContact];
   }
}

Best Answer

It looks like your issue is purely in the HTML markup, try this:

<template>
<lightning-card title='Accounts' icon-name='standard:account'>
    <div class='slds-m-around_medium'>
        <template if:true={accounts.data}>
            <ul>
                <li for:each={accounts.data} for:item="acc" key={acc.Id}>{acc.Name}</li>
            </ul>
        </template>
        <template if:true={accounts.error}>
            {accounts.error}
        </template>
    </div>
</lightning-card>
</template>

EDIT Corrected markup

Related Topic