How to read Map<String,List<String>> and get key and values in LWC JavaScript?

Question

The data is coming from Controller like Map<String,List<String> and need to read the Map in the Javascript. I tried to use keyset() to get key, but it failed.

Original data in the Map is :

{"error":["Error Fields: (FirstName) : FirstName required.","Error Fields: (Phone) : Office Phone Number Required.","Error Fields: () : House Phone number required"]}

In the above data, I wanted to loop the value List based on Key 'error'.

Edit

The above issue resolved by using the below solution. But now I have an issue to display the error message line by line in the HTML page. I used to divide the error message by using \\n but and print in the console, it looks good. But when I pass to the HTML, it is again showing next to each other. Here is the code.

result['error'].forEach( x=>{                                   
                errMsg += x+ '\n';
             });      
             this.showErrorMessage = true;

Result in console:

errorMessage*****

FirstName Required.
Office Phone Number Required.
House Phone number required

But when displaying in HTML, it is displaying next to each other like this: FirstName Required. Office Phone Number Required. House Phone number required.

HTML code:

<template if:true={showErrorMessage}>
                        <div>
                            <h6 style="color: red;">{errMsg }</h6>
                        </div>

                    </template>

Answer 1

JavaScript doesn't have keyset method, you're confusing it with Apex maybe?

You could do it like that, bit old-school but if you want readability

let x = {
    "error":[
        "Error Fields: (FirstName) : FirstName required.",
        "Error Fields: (Phone) : Office Phone Number Required.",
        "Error Fields: () : House Phone number required"
     ]
};

if(x && x.error && x.error.length){
    for(let i = 0; i < x.error.length; ++i){
        console.log(x.error[i]);
    }
}

Or if you're comfortable with modern JavaScript and callback functions you could go with array.map method

x.error.map(function(row){
    console.log(row);
});

Or even "arrow function"

console.log(x.error.map(i => i));

If you're getting started with Lightning Web Components trailheads like https://trailhead.salesforce.com/en/content/learn/modules/modern-javascript-development might help. Or any online course about EC6 (EcmaScript 6, version of JavaScript specification you'll see a lot in some LWC tutorials). There's some black magic like spread operator, arrow functions that will take a while getting used to.

Nothing wrong with starting by writing more verbose but readable code and slowly moving on to the fancier syntax, especially if you're in big team and not everybody is JS god.