Iterate over Object in Lightning Web Component template

Question

I'm struggling trying to figure out how to iterate over an array of objects returned by an Apex method to print object name + label as key.

The structure of the object is the following:

public class SalesforceObject {
    public String name;
    public String label;
}

JS Controller is the following:

import { LightningElement, wire } from 'lwc';
import getSObjectList from '@salesforce/apex/ReportsAppController.getSObjectList';
export default class SObjectList extends LightningElement {
    @wire(getSObjectList) objectList; 
}

And my template is the following one:

<template>
    <template if:true={objectList.data}>
        <template for:each={objectList.data} for:item="object">
                <p key={object.Label}>{object.Name}</p>
        </template>
    </template>
</template>

Already tried to capitalize and lower-case Label & Name words, but still is not working...

Answer 1

Make the following changes:-

Apex: Class

public class SalesforceObject{
    @AuraEnabled
    public String name{set;get;}
    @AuraEnabled
    public String label{set;get;}
}

Lightning Web Component:-

<template iterator:obj={objectList}>
    <p key={obj.value.name}>{obj.value.label}</p>
</template>

Answer 2

With a quick test, seems @AuraEnabled as was case with Lightning Aura Component, the annotation is still required to access properties of custom class on a LWC as well.

So to access the properties, you will need to annotate the properties with @AuraEnabled.

public class SalesforceObject {
    @AuraEnabled public String name;
    @AuraEnabled public String label;
}

And use the same case on the HTML:

<p key={object.label}>{object.name}</p>

Answer 3

For me Iterating over objects works perfectly fine without Annotating the properties in Apex, i am using the @wire like this:

The data received is List sent as response from the Apex. Used @track topNewsServer to assign and iterate in html

Apex method: -

@AuraEnabled(cacheable=true)
public static Map<String, Object> getTopNewsData(String filter) 
{
  Map<String, Object> response = new Map<String, Object>();
  //performs logic here to build
  List<Account> accessibleAccounts = [SELECT
                Id, Name
        FROM Account
        ORDER BY LastModifiedDate DESC LIMIT 100];
        response.put('accounts', accessibleAccounts);
        // do something else...
        response.put('values', timelineResponse);
        return response;
}



@wire(getTopNewsData, {filter: '$topNewsKey'})
wiredTopNewsResponse({ error, data }) {
    if (data) {
        this.loading = false;
        if(data!=null )this.topNewsServer = data.values;
    } else if (error){
        this.errorToastTopNews(error.body.message);
    }
}