+ Start a Discussion
Jacob Elliott 8Jacob Elliott 8 

LWC: How to iterate over a list of SObjects

Hello, I am trying to iterate over a list of SObjects, but I'm not sure how to get it to display.

Here is the controller
public with sharing class RandomRecordAudit {
    @AuraEnabled(cacheable=true)
    public static map<string, string> getAllObjects(){
        map<string, string> objectList = new map<string, string>();
        for ( Schema.SObjectType o : Schema.getGlobalDescribe().values() )
        {
            Schema.DescribeSObjectResult objResult = o.getDescribe();
            objectList.put(objResult.getName(), objResult.getLabel());
        }
        return objectList;
    } 
}

Here is the JS file
import { LightningElement, track } from 'lwc';
import getAllObjects from '@salesforce/apex/RandomRecordAudit.getAllObjects';
export default class SObjectList extends LightningElement {
    
        @track objects;
        @track error;
    
        handleLoad() {
            getAllObjects()
                .then(result => {
                    this.objects = result;
                })
                .catch(error => {
                    this.error = error;
                });
        
    }
}

and here is the HTML
<template>
    <lightning-card title="ApexImperativeMethod" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <template if:true={objects}>
                <template for:each={objects} for:item="object">
                    <p key={object.Id}>{object.Name}</p>
                </template>
            </template>
            <template if:true={error}>
                <p>Error</p>
                <c-error-panel errors={error}></c-error-panel>
            </template>
        </div>
    </lightning-card>
</template>

Any help is greatly appreciated, thanks!​​​​​​​
Best Answer chosen by Jacob Elliott 8
Maharajan CMaharajan C
Hi Jacob,

The below chnages have to be done in Component and JS:
1. You are call the Apex from handleLoad method in JS but you are not calling this method from any button in Component.  --> So i have used the  connectedCallback to load the data on page load.

2. I have used the array in JS and lloped the result  to convert the map into a list for template iteration.

Component:

<template>
    <lightning-card title="ApexImperativeMethod" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <template if:true={objects}>
                <p>Test</p>
                <template for:each={objects} for:item="object">
                    <p key={object.key}>{object.value}</p>
                </template>
            </template>
            <template if:true={error}>
                <p>Error</p>
                <c-error-panel errors={error}></c-error-panel>
            </template>
        </div>
    </lightning-card>
</template>

================

JS :

/* eslint-disable no-alert */
import { LightningElement,track } from 'lwc';
import getAllObjects from '@salesforce/apex/RandomRecordAudit.getAllObjects';

export default class ForumIterateMap extends LightningElement {
    @track objects = [];
    @track error;
    
        connectedCallback(){
            getAllObjects()
                .then(result => {
                    //this.objects = result;
                    alert(' Result ==> ' + this.objects);
                    for(let key in result) {
                        // Preventing unexcepted data
                        if (result.hasOwnProperty(key)) { // Filtering the data in the loop
                            this.objects.push({value:result[key], key:key});
                        }
                    }
                })
                .catch(error => {
                    this.error = error;
                });
        
    }
}

Thanks,
Maharajan.C

All Answers

Alain CabonAlain Cabon

<template for:each={objects} for:item="object"> : iterates a list or array of objects (not a map).

A solution is to convert the map of strings into a list of objects [ { key1, value1 } , { key2, value2 }  ]

Iterate Map in Lightning Web Components
https://newstechnologystuff.com/2019/04/07/iterate-map-in-lightning-web-components-lwc/

 
Maharajan CMaharajan C
Hi Jacob,

The below chnages have to be done in Component and JS:
1. You are call the Apex from handleLoad method in JS but you are not calling this method from any button in Component.  --> So i have used the  connectedCallback to load the data on page load.

2. I have used the array in JS and lloped the result  to convert the map into a list for template iteration.

Component:

<template>
    <lightning-card title="ApexImperativeMethod" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <template if:true={objects}>
                <p>Test</p>
                <template for:each={objects} for:item="object">
                    <p key={object.key}>{object.value}</p>
                </template>
            </template>
            <template if:true={error}>
                <p>Error</p>
                <c-error-panel errors={error}></c-error-panel>
            </template>
        </div>
    </lightning-card>
</template>

================

JS :

/* eslint-disable no-alert */
import { LightningElement,track } from 'lwc';
import getAllObjects from '@salesforce/apex/RandomRecordAudit.getAllObjects';

export default class ForumIterateMap extends LightningElement {
    @track objects = [];
    @track error;
    
        connectedCallback(){
            getAllObjects()
                .then(result => {
                    //this.objects = result;
                    alert(' Result ==> ' + this.objects);
                    for(let key in result) {
                        // Preventing unexcepted data
                        if (result.hasOwnProperty(key)) { // Filtering the data in the loop
                            this.objects.push({value:result[key], key:key});
                        }
                    }
                })
                .catch(error => {
                    this.error = error;
                });
        
    }
}

Thanks,
Maharajan.C
This was selected as the best answer
Ajay K DubediAjay K Dubedi
Hi Jacob,

Use the below code for itration in LWC. 

Apex controller
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>
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com
Jacob Elliott 8Jacob Elliott 8
Thank you, everyone, it looks like all of these solutions work. I really appreciate the help!