LWC Wiring apex method returns [object Object]

Question

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

Answer 1

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

Answer 2

<template if:true={accounts.data}>
        <li key={accounts.accountId}>
            {accounts.accountId}
        </li>
    </template>

Here you are checking if data exists but there is no iteration. As you have put in javascript you data ()which is array of records in accounts and you cannot get accountId directly. Moreover you are returning accounts directly so it is Id you are looking for, nor accountId.

Try this: (as pointed by @zaitsman)

<template if:true={accounts.data}>
            <template for:each={accounts.data} for:item="account">
                <p key={account.Id}>{account.Name}</p>
            </template>
        </template>

further read: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.apex