Wednesday, January 8, 2020

How to iterate over the list in lightning web components

How to iterate over list in lightning web components


This blog post will explain "How to iterate over list in lightning web components".


listdemolwc.html


<template>
    <lightning-card>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
              <tr class="slds-line-height_reset">
                <th class="" scope="col">
                  <div class="slds-truncate" title="Key">Account Name</div>
                </th>
                <th class="" scope="col">
                  <div class="slds-truncate" title="Value">Account Description</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <template for:each={accountsdata.data} for:item="item" for:index="index">
                <tr key={item.id}>
                    <th scope="col">
                     {item.Name}
                    </th>
                    <th scope="col">
                      {item.Description}
                    </th>
                </tr>
            </template>
        </tbody>
        </table>
    </lightning-card>
  </template>

listdemolwc.js


/* eslint-disable no-unused-vars */
/* eslint-disable no-alert */
/* eslint-disable no-console */
/* eslint-disable guard-for-in */

/* eslint-disable vars-on-top */

import { LightningElement, track, wire } from 'lwc';

import getDataFromApex from '@salesforce/apex/listapexcontroller.methodName';

export default class listdemolwc extends LightningElement {

@wire(getDataFromApex) accountsdata;

}

listapexcontroller.cls


public with sharing class listapexcontroller {
    @AuraEnabled(cacheable=true)
    public static list<Account> methodName(){

        list<Account> acclist=new list<Account>();
        acclist=[SELECT id,Name,Description from Account];
        return acclist;
    }
    public listapexcontroller() {

    }
}

lightningapp.app


<aura:application extends="force:slds">
<c:listdemolwc></c:listdemolwc>
</aura:application>          

No comments:

Post a Comment