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>
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.