You need to sign in to do that
Don't have an account?
Sumesh Chandran
Lightning web component - loop through values on template conditionally
Not sure if this is the way to accomplish this. I have a dataset column that needed to looped through and based on the values it should conditionally display them. I have this code copied four times to make this work, not sure how would I do it, if I weren't sure of the values coming in.
The Javascript
Please advise!
<template> <div class="slds-grid slds-gutters slds-align_absolute-center"> <div class="slds-col slds-size_2-of-12"> <lightning-card title="BRITISH COLUMBIA"> <hr class="titleDivider"> <template for:each={bc} for:item="city"> <lightning-layout class="slds-p-top_x-small" horizontal-align="spread" key={city.Id}> <lightning-layout-item flexibility="auto" padding="horizontal-small"> <p style="color: rgb(67, 119, 214);"><strong>{city.Name}</strong></p> </lightning-layout-item> <lightning-layout-item class="slds-float_right" flexibility="auto" padding="horizontal-small"> <template for:each={city.sumchans__City_Stats__r} for:item="stats"> <p key={stats.Id} style="color: rgb(224, 111, 91);"><strong>{stats.sumchans__Penetration__c}%</strong></p> </template> </lightning-layout-item> </lightning-layout> </template> </lightning-card> </div> <div class="slds-col slds-size_2-of-12"> <lightning-card title="ALBERTA"> <hr class="titleDivider"> <template for:each={ab} for:item="city"> <lightning-layout class="slds-p-top_x-small" horizontal-align="spread" key={city.Id}> <lightning-layout-item flexibility="auto" padding="horizontal-small"> <p style="color: rgb(67, 119, 214);"><strong>{city.Name}</strong></p> </lightning-layout-item> <lightning-layout-item class="slds-float_right" flexibility="auto" padding="horizontal-small"> <template for:each={city.sumchans__City_Stats__r} for:item="stats"> <p key={stats.Id} style="color: rgb(224, 111, 91);"><strong>{stats.sumchans__Penetration__c}%</strong></p> </template> </lightning-layout-item> </lightning-layout </template> </lightning-card> </div> <div class="slds-col slds-size_2-of-12"> <lightning-card title="MANITOBA"> <hr class="titleDivider"> <template for:each={mb} for:item="city"> <lightning-layout class="slds-p-top_x-small" horizontal-align="spread" key={city.Id}> <lightning-layout-item flexibility="auto" padding="horizontal-small"> <p style="color: rgb(67, 119, 214);"><strong>{city.Name}</strong></p> </lightning-layout-item> <lightning-layout-item class="slds-float_right" flexibility="auto" padding="horizontal-small"> <template for:each={city.sumchans__City_Stats__r} for:item="stats"> <p key={stats.Id} style="color: rgb(224, 111, 91);"><strong>{stats.sumchans__Penetration__c}%</strong></p> </template> </lightning-layout-item> </lightning-layout> </template> </lightning-card> </div> <div class="slds-col slds-size_2-of-12"> <lightning-card title="SASKATCHEWAN"> <hr class="titleDivider"> <template for:each={sk} for:item="city"> <lightning-layout class="slds-p-top_x-small" horizontal-align="spread" key={city.Id}> <lightning-layout-item flexibility="auto" padding="horizontal-small"> <p style="color: rgb(67, 119, 214);"><strong>{city.Name}</strong></p> </lightning-layout-item> <lightning-layout-item class="slds-float_right" flexibility="auto" padding="horizontal-small"> <template for:each={city.sumchans__City_Stats__r} for:item="stats"> <p key={stats.Id} style="color: rgb(224, 111, 91);"><strong>{stats.sumchans__Penetration__c}%</strong></p> </template> </lightning-layout-item> </lightning-layout> </lightning-card> </div> </div> </template>
The Javascript
import { LightningElement, wire, track } from "lwc"; import getCityStats from "@salesforce/apex/mduMarketAnalysisController.getCityStats"; export default class MduPenetration extends LightningElement { @track bc = []; @track ab = []; @track mb = []; @track sk = []; @wire(getCityStats) cityStats({ data }) { if (data) { for (let i = 0; i < data.length; i++) { if (data[i].sumchans__Province_Code__c == 'BC') { this.bc.push(data[i]); } if (data[i].sumchans__Province_Code__c == 'AB') { this.ab.push(data[i]); } if (data[i].sumchans__Province_Code__c == 'MB') { this.mb.push(data[i]); } if (data[i].sumchans__Province_Code__c == 'SK') { this.sk.push(data[i]); } //this.stats.push(data.value); } } } }
Please advise!