如何阅读地图<String,List<String> &gt; 并在 LWC JavaScript 中获取键和值？

Question

数据来自 Controller 之类的Map<String,List<String>并且需要在 Javascript 中读取 Map。 我尝试使用 keyset() 获取密钥，但失败了。

地图中的原始数据是：

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

在上面的数据中，我想根据 Key 'error' 循环值 List。

编辑

使用以下解决方案解决了上述问题。 但是现在我遇到了在 HTML 页面中逐行显示错误消息的问题。 我曾经使用 \\n 来划分错误消息，但是在控制台中打印，它看起来不错。 但是当我传递给 HTML 时，它再次显示在彼此旁边。 这是代码。

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

结果在控制台：

errorMessage*****

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

但是在 HTML 中显示时，它会像这样并排显示：FirstName Required。 办公室电话号码 必填。 需要家庭电话号码。

HTML代码：

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

                    </template>

Answer 1

JavaScript 没有keyset方法，您可能将它与 Apex 混淆了？

你可以这样做，有点老派，但如果你想要可读性

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]);
    }
}

或者，如果您对现代 JavaScript 和回调函数感到满意，则可以使用array.map方法

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

甚至“箭头函数”

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

如果您开始使用 Lightning Web Components 入门，如https://trailhead.salesforce.com/en/content/learn/modules/modern-javascript-development可能会有所帮助。 或者任何关于 EC6 的在线课程（EcmaScript 6，你会在一些 LWC 教程中看到很多的 JavaScript 规范版本）。 有一些黑魔法，如扩展运算符、箭头函数，需要一段时间才能习惯。

从编写更冗长但可读的代码开始，然后慢慢转向更高级的语法并没有错，特别是如果您在大团队中并且不是每个人都是 JS 之神。