function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ 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!
Ajinkya DhasAjinkya Dhas
Hi Jacob,

You can do this by using two iteration Method 

1. For:Each 

SYNTAX :
-----------------------------------------------------------
<template>
 <template for:each={yourList} for:item="listVariable">
   <div key={listVariable.UniqueValue}>
      {listVariable.listItemLabel}
   </div>
 </template>
</template>
-----------------------------------------------------------

2. Iterator 

SYNTAX :
-----------------------------------------------------------
<template>
 <template iterator:it={list}>
  <div key={it.uniqueKey}>
  <div if:true={it.first} class="doSomething">
   </div>
        {it.listItemlabel}
   <div if:true={it.last} class="doSomething">
  </div>
  </div>
 </template>
</template>
-----------------------------------------------------------

I Hope This Will Help.....

For a detailed explanation please find Link Below :
https://www.salesforcekid.com/2020/05/list-iteration-in-salesforce-lightning-web-component.html

Thanks.