0

I broke my head with this case. Please help.

APEX

Map < Integer, Map < String, String >> reportData = new Map < Integer, Map < String, String >> ();
return reportData; 

JS

fetchMapData({
                csvFileBodyLWC: this.uploadedFiles[0].documentId
            })
            .then(result => {
                var map1 = result; // {1 === FirstName=Ivan, LastName=Sokolov}
                for (var key1 in map1) {
                    var map2 = map1[key1]; // {FirstName=Ivan, LastName=Sokolov}

                    var newMap = [];
                    for (var key2 in map2) {
                        newMap.push({
                            value: map2[key2],
                            key: key2
                        })
                    }
                    alert(newMap);
                    alert(newMap.length);

                    for (var key1 in map1) {
                        this.mapData.push({
                            value: newMap,
                            key: key1
                        });
                    }

                }
            })
            .catch(error => {
                alert(error);
            });
    }

HTML

<template for:each={mapData} for:item="mapKey">
                            <tr key={mapKey.key}>
                                <td>
                                    <div title={mapKey.key}>{mapKey.key}</div>
                                </td>
                                <template for:each={mapKey.key} for:item="mapKeyKey">
                                    <td key={mapKeyKey.key}>
                                        {mapKeyKey.key}
                                    </td>
                                </template>
                            </tr>
                        </template>

1 Answer 1

1

there was extra "for" :

JS

fetchMapData({
                csvFileBodyLWC: this.uploadedFiles[0].documentId
            })
            .then(result => {
                var map1 = result; // {1 === FirstName=Ivan, LastName=Sokolov}
                for (var key1 in map1) {
                    var map2 = map1[key1]; // {FirstName=Ivan, LastName=Sokolov}

                    var newMap = [];
                    for (var key2 in map2) {
                        newMap.push({
                            value: map2[key2],
                            key: key2
                        })
                    }

                    this.mapData.push({
                        value: newMap,
                        key: key1
                    });

                }
            })
            .catch(error => {
                alert(error);
            });
    }

HTML

<template if:true={mapData}>
                    <table style="font-size: 0.5em"
                        class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_col-bordered slds-table_striped">

                        <template for:each={mapData} for:item="mapKey">
                            <tr key={mapKey.key}>
                                <td>
                                    <div title={mapKey.key}>{mapKey.key}</div>
                                </td>
                                <template for:each={mapKey.value} for:item="mapKeyKey">
                                    <td key={mapKeyKey.key}>
                                        {mapKeyKey.value}
                                    </td>
                                </template>
                            </tr>
                        </template>
                    </table>
                </template>

You must log in to answer this question.

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