I have LWC that loop through data in order to create accordion items What I am looking to do is to have two variables within the Label. so something like : {dataItem.locationName} - { dataItem.startDate}

I wanted to do it in the JS but since the loop is in the HTMl I am not sure how to do it ..


<template for:each={data} for:item="dataItem">
    <div key={dataItem.id}  class="slds-box slds-m-around_xx-small">
        <lightning-accordion-section name={dataItem.id} label= {dataItem.locationName}>
        {dataItem.locationName} - { dataItem.startDate}

1 Answer 1


You need to prepare data in JS, and later loop through it in HTML.

this.data = someData.map(item => ({
   ...item, //all other properties will be copied.
   locationName: item.fieldToGetLocationName, 
   startDate: item.fieldToGetStartDate
  • Make sense it is what I was testing .. thx you
    – Ben2pop
    Commented Aug 21, 2022 at 9:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .