How to iterate the Map<String,List<String>> in LWC Html

Question

I am getting my JSON output from vlocity (Omnistudio) Integration Procedure. I have created the Map<String,List> in the LWC JS. Now trying to iterate this Map in LWC Html.

How can I iterate the Map into the lwc HTML?

JSON Structure from Integration Procedure

[
  {
    "AttributeLabel": "Limit",
    "AttributeValues": "10000000"
  },
  {
    "AttributeLabel": "Limit",
    "AttributeValues": "20000000"
  },
  {
    "AttributeLabel": "Excess",
    "AttributeValues": "200"
  },
  {
    "AttributeLabel": "Excess",
    "AttributeValues": "500"
  },
  {
    "AttributeLabel": "Excess",
    "AttributeValues": "1000"
  },
  {
    "AttributeLabel": "Discount"
  }
]

LWC JS

import { LightningElement,track } from 'lwc';
import { OmniscriptActionCommonUtil } from 'vlocity_ins/omniscriptActionUtils';
export default class BroliPricingLWC extends LightningElement {
    actionUtilClass = new OmniscriptActionCommonUtil();
    productCustom =[];
    mapDataNew = [];
    mapData = [];
    showAttributeMap = [];
    getAllUniquePlans;
    connectedCallback() {
         const params = {
            input: {},
            sClassName: 'vlocity_ins.IntegrationProcedureService',
            sMethodName: 'Brolli_Pricing',
            options: '{}',
        };
        this.mapDataNew = new Map([[String.prototype, [String.prototype]]]);
        this.mapData = ([[String.prototype, [String.prototype]]]);
        this.showAttributeMap = new Map();
        
        this.actionUtilClass.executeAction(params).then(response => { 
            this.productCustom = response.result.IPResult;
               this.productCustom.forEach(tempRecord=>{
                console.log('tempRecord',tempRecord.AttributeLabel);
                console.log('tempRecord',tempRecord.AttributeValues);
                   if(this.mapDataNew.has(tempRecord.AttributeLabel)){
                    this.mapDataNew.get(tempRecord.AttributeLabel).push(tempRecord.AttributeValues);
                }else{
                    this.mapDataNew.set(tempRecord.AttributeLabel,[tempRecord.AttributeValues]);
                }
            });
            console.log('mapDataNew',this.mapDataNew);
        })
        
        .catch(error => {
            alert('alert in error',error);
        });

    }
}

LWC HTML

<template for:each={mapDataNew} for:item="mapkey">
    <tr key={mapkey}>
        <th scope="col">
         {mapkey}
        </th>
        <th scope="col">
        <template for:each={mapkey.value} for:item="mapval">
            {mapval}
        </template>
      </th>
    </tr>
</template>

This is how my Array is looking in console

Answer 1

In addition to the above answer. For the map you shared, I tried it on my end -

mapData = [
        {
            'Label': 'Limit',
            'values': [
                {
                    "AttributeLabel": "Limit",
                    "AttributeValues": "10000000"
                },
                {
                    "AttributeLabel": "Limit",
                    "AttributeValues": "20000000"
                }
            ]
        },
        {
            'Label': 'Excess',
            'values': [
                {
                    "AttributeLabel": "Excess",
                    "AttributeValues": "200"
                },
                {
                    "AttributeLabel": "Excess",
                    "AttributeValues": "500"
                },
                {
                    "AttributeLabel": "Excess",
                    "AttributeValues": "1000"
                }
            ]
        },
        {
            'Label': 'Discount', 'values': [
                {
                    "AttributeLabel": "Discount",
                    "AttributeValues": "50"
                }
            ]
        }
    ]

<template>
    <template for:each={mapData} for:item="item">
        <tr key={item}>
            <th scope="col">
                {item.Label}
            </th>
        </tr>

        <template for:each={item.values} for:item="child">
            <tr key={item}>
                <th scope="col">
                    {child.AttributeLabel}
                </th>
                <th scope="col">
                    {child.AttributeValues}
                </th>
            </tr>
        </template>
    </template>
</template>

Answer 2

You won't be able to iterate a Map in lwc.

Try a structure like this:

[
  {"label":"Limit","values": ["val1","val2"]},
  {"label":"Excess","values": ["val1","val2"]}
]

Then iterate like this:

<template for:each={mapDataNew} for:item="mapDataItem">
    <tr key={mapDataItem.label}>
        <th scope="col">
         {mapDataItem.label}
        </th>
        <th scope="col">
        <template for:each={mapDataItem.values} for:item="value">
            {value}
        </template>
      </th>
    </tr>
</template>

(you may also need to add keys to the values array, if they are not unique)

To build the array out of the map, do something like this:

let temp = [];
this.mapDataNew.forEach( (value,key,map) => {
  temp.push({"label":key,"values": value})
});
this.mapArray = temp;