Loop through List in LWC and Javascript

In this post, we will implement different ways to loop through List in LWC and Javascript. This is extremely useful especially in Javascript when you need to loop through the list to perform some operation. You can choose from multiple ways to loop through List. So let’s just hop into the implementation.

Implementation

In this implementation, we will create a simple Array of Objects in the Javascript file of Lightning Web Component and loop through it in multiple ways in LWC and Javascript.

loops.js

import { LightningElement } from 'lwc';
export default class Loops extends LightningElement {
    lstAccounts = [
        {
            Id : '101',
            Name : 'Cristiano Ronaldo'
        },
        {
            Id : '102',
            Name : 'Lionel Messi'
        },
        {
            Id : '103',
            Name : 'Sachin Tendulkar'
        }
    ];
}

Loop through List in LWC

To loop through List in LWC, we can make use of for:each and iterator:it.

To use for:each, assign the Array to for:each and iterator variable to for:item. Then, we can use this iterator variable to access the elements in the Array.

<template for:each={lstAccounts} for:item="acc">
    <p key={acc.Id} style="display:inline">
        <lightning-badge label={acc.Name}></lightning-badge>
    </p>
</template>

To use iterator:it, we just need to assign the Array to iterator:it. Then, we can access the elements of Array using it.value. Please note that it is just a placeholder here and you can use anything you want.

<template iterator:acc={lstAccounts}>
    <p key={acc.value.Id} style="display:inline">
        <lightning-badge label={acc.value.Name} class="slds-badge_inverse"></lightning-badge>
    </p>
</template>

Loop through List in Javascript

There are multiple ways to Loop through List in Javascript. Let’s go through it one by one.

Basic For Loop

If you are reading this post, I don’t have to explain this. Just go through below for loop:

for(let i=0; i<this.lstAccounts.length; i++){
    console.log(this.lstAccounts[i].Name);
}

forEach Method

We have to pass a function to forEach method which will be executed for every element in the Array. Each element is stored in the acc variable which we can use to access the current element. The break statement is not supported in this method. Hence, use it only if you want to work on all the records in Array.

this.lstAccounts.forEach(function(acc){
    console.log(acc.Name);
});

forEach Array Function

This method works the same as above but has a different syntax introduced in ECMAScript 6. The break statement is not supported in this method. Hence, use it only if you want to work on all the records in Array.

this.lstAccounts.forEach(acc =>{
    console.log(acc.Name);
});

For…IN loop

This loop considers provided Array as Object with numbers or indexes for keys(acc).

for(let acc in this.lstAccounts){
    console.log(this.lstAccounts[acc].Name);
}

For…Of loop

This is again the same as above but it stores the array element in key(acc) directly rather than the index of Array.

for(let acc of this.lstAccounts){
    console.log(acc.Name);
}

That is all from this post. Below is the complete code of this implementation.

loops.html

<template>
    <lightning-card title="Multiple ways to Loop through Array/List in LWC & Javascript">
        <div class="slds-m-around_medium">
            
            <p class="slds-text-title_bold">For-Each Loop:</p>
            <template for:each={lstAccounts} for:item="acc">
                <p key={acc.Id} style="display:inline">
                    <lightning-badge label={acc.Name}></lightning-badge>
                </p>
            </template> <br/><br/>
            <p class="slds-text-title_bold">Iterator:</p>
            <template iterator:acc={lstAccounts}>
                <p key={acc.value.Id} style="display:inline">
                    <lightning-badge label={acc.value.Name} class="slds-badge_inverse"></lightning-badge>
                </p>
            </template> <br/><br/>
            <p class="slds-text-title_bold">Loops in Javascript</p>
            <ol class="slds-list--ordered">
                <li>Basic For Loop</li>
                <li><strong>forEach</strong> Method</li>
                <li><strong>forEach Array</strong> Function</li>
                <li>For...In loop</li>
                <li>For...Of loop</li>
            </ol> 
        </div>
    </lightning-card>
</template>

loops.js

import { LightningElement } from 'lwc';
export default class Loops extends LightningElement {
    lstAccounts = [
        {
            Id : '101',
            Name : 'Cristiano Ronaldo'
        },
        {
            Id : '102',
            Name : 'Lionel Messi'
        },
        {
            Id : '103',
            Name : 'Sachin Tendulkar'
        }
    ];
    constructor(){
        super();
        // 1. Basic For Loop
        for(let i=0; i<this.lstAccounts.length; i++){
            console.log(this.lstAccounts[i].Name);
        }
        // 2. forEach Method
        this.lstAccounts.forEach(function(acc){
            console.log(acc.Name);
        });
        // 3. forEach Array Function
        this.lstAccounts.forEach(acc =>{
            console.log(acc.Name);
        });
        // 4. For...IN loop
        for(let acc in this.lstAccounts){
            console.log(this.lstAccounts[acc].Name);
        }
        // 5. For...Of loop
        for(let acc of this.lstAccounts){
            console.log(acc.Name);
        }
    }
}

Also Read:

• Difference between Var, Let, and Const in JavaScript
• FIELDS() in SOQL: How to Query All Fields in SOQL
• template if:true in LWC with Conditional Statements

This is how our implementation looks:

These are the different ways to loop through List in LWC and Javascript. If you don’t want to miss new implementations, please Subscribe here.

If you want to check more implementations using Lightning Web Components, you can check it here.

See you in the next implementation!