How can I do a nested template for:each in LWC for a map of arrays?

Question

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

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)

Answer 1

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>

Answer 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

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>

Answer 3

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>