5

How can I render out items in groups from a Javascript Map, where the key is the header string and the values are an array (for simplicity, let's just render the Label value from each element)?

From my early experiments, it seems LWC's for:each isn't flexible enough to do this without some backend data-wrangling, as it can't do computed expressions.

Data structure looks like this

Browser dev console showing Map keyed on string, with arrays as values

and I'm trying to get some kind of grouping from that that looks like this (don't worry about the aesthetics for now, this is more about the data structure traversal on the template)Mockup UI

3
  • This post shows an example using nested templates to iterate over a map keys, and values in the nested template - does that work with your data structure needs? sfdc-lightning.com/2020/01/…
    – nickforce
    Mar 24, 2022 at 21:14
  • Certainly worth a look - never too many resources
    – Rob Cowell
    Mar 24, 2022 at 21:27
  • Ah, that's using Apex Maps not Javascript ones
    – Rob Cowell
    Mar 25, 2022 at 10:11

3 Answers 3

9

You should be able to access elements of the array using a nested for:each and dot notation in your HTML file.

<template for:each={dataStructure} for:item="data">
    <th key={data.Key}>{data.Key}</th>
    <template for:each={data.value} for:item="dataValue">
        <td key={dataValue.Id}>{dataValue.Label}</td>
    </template>
</template>
4
  • Nope, I get nothing rendered for either data.key or data.Value - the only renderable is data itself, which gives EXECUTIVE SUMMARY,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]PROPERTY DESCRIPTION,[object Object],[object Object]RECORD STATUS AND PROPERTY FEATURES,[object Object],[object Object]RISK ASSESSMENT INTRODUCTION,[object Object]RISK ASSESSMENT,[object Object]RISK ASSESSMENT CHECKLIST,[object Object],[object Object]SIGNIFICANT FINDINGS AND ACTION PLAN,[object Object],[object Object] etc.
    – Rob Cowell
    Mar 25, 2022 at 9:51
  • I have something on webcomponents.dev - does this help? webcomponents.dev/edit/EDIJGhlgyomrCcRifu9S Mar 25, 2022 at 12:12
  • I realized I left out the key portion in the th tag, which is my error. Have you tried the structure in the webcomponents.dev from Todd? Mar 25, 2022 at 15:40
  • 1
    A little late to the party here, but with the key attribute this works for me, thanks very much! Apr 28, 2023 at 19:00
2

The solution I've arrived at (for now at least) is to flatten my map back out to an array of key-value pairs, where the value part is also an array. The magic line of code is as follows

Array.from(itemsByGroupMap, ([key, value]) => ({value,key}));

which gives me a structure very similar to my original map (image in the original question), but is easier to work with in the template

Dev console array screenshot

and then my template iteration becomes very similar to what Evelyn proposed :

 <template for:each={itemsByGroup} for:item="item">
            <p key={item.key}>{item.key}</p>
            <template for:each={item.value} for:item="itemValue">
                <p key={itemValue.id}>{itemValue.Label__c}</p>
            </template>
            
        </template>
    </template>
0

Have a look at this example : https://newstechnologystuff.com/2019/04/07/iterate-map-in-lightning-web-components-lwc/

You set the Javascript map here :

// Push data into the map in the form of { value:v, key:k } JSON objects
this.mapData.push({value:val, key:k})

Then you use the map in LWC this way :

<!-- For each piece of mapData, use mapKey to iterate on the map -->
<template for:each={mapData} for:item="mapKey">
    <p>key : {mapKey.key}</p>
    <p>value : {mapKey.value}</p>
</template>

You must log in to answer this question.

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