EP-05 | For Each Loop in LWC | How and where to use it | LWC Stack ☁️⚡️

Kapil May 26, 2021


LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together ! Please check complete code below from LWC Stack EP-05

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
    <lightning-card title="How to use for each loop in LWC" icon-name="utility:user">
        <div style="padding:10px">
            <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered" border="1">
                <thead>
            <tr class="slds-line-height_reset">
                <td>
                    Student Name
                </td>
                <td>
                    Class
                </td>
                <td>
                    Fee
                </td>
            </tr>
            </thead>
            <template for:each={students} for:item="stu">
                <tr key={stu.Id}  class="slds-hint-parent">
                    <td>{stu.Name}</td>
                    <td>{stu.Class}</td>
                    <td>{stu.Fee}</td>
                </tr>
            </template>
        </table>
    </div>
    </lightning-card>
</template>

JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import { LightningElement } from 'lwc';

export default class UseForEachLoop extends LightningElement {
    students=[
        {
            Id : '001',
            Name : 'Student 1',
            Class : 'Class 1',
            Fee  : '1000 $'

        },
        {
            Id : '002',
            Name : 'Student 2',
            Class : 'Class 2',
            Fee  : '1000 $'

        },
        {
            Id : '003',
            Name : 'Student 3',
            Class : 'Class 3',
            Fee  : '1000 $'

        },
        {
            Id : '004',
            Name : 'Student 4',
            Class : 'Class 4',
            Fee  : '1000 $'

        },
        {
            Id : '005',
            Name : 'Student 5',
            Class : 'Class 5',
            Fee  : '1000 $'

        },
        {
            Id : '006',
            Name : 'Student 6',
            Class : 'Class 6',
            Fee  : '1000 $'

        },
        {
            Id : '007',
            Name : 'Student 7',
            Class : 'Class 7',
            Fee  : '1000 $'

        },
        {
            Id : '008',
            Name : 'Student 8',
            Class : 'Class 8',
            Fee  : '1000 $'

        },
        {
            Id : '009',
            Name : 'Student 9',
            Class : 'Class 9',
            Fee  : '1000 $'

        },
        {
            Id : '010',
            Name : 'Student 10',
            Class : 'Class 10',
            Fee  : '1000 $'

        }
    ];
}

Output


Checkout complete tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)
Tags:

Post a Comment

0 Comments