如何在网页上漂亮地打印JavaScript对象的键和值

Question

我有一个JavaScript对象，它包含术语和定义。我想创建一个在网页上显示/打印键值对的函数。

例如：

let dict = {
term1: "definition",
term2: "definition",
term3: "definition",
term4: "definition"
}

理想输出：

术语1:定义

术语2:定义

术语3:定义

术语4:定义

我当前正在使用此代码：

function viewAll()
{
var json = JSON.stringify(dict,null,3);
document.getElementById("output").innerText = json;
}

输出：

{
term1: "definition",
term2: "definition",
term3: "definition",
term4: "definition"
}

这没关系，但我想删除特殊字符({",(

Answer 1

Us Object.entries和map以格式化数据的显示方式。

let dict = {
term1: "definition 1",
term2: "definition 2",
term3: "definition 3",
term4: "definition 4"
}
const str = Object.entries(dict).map(([key, value]) => `${key}: ${value}`).join("<br/>");
document.getElementById("out").innerHTML = str;

<div id="out"></div>

看起来你真的想要一个定义列表

let dict = {
term1: "definition 1",
term2: "definition 2",
term3: "definition 3",
term4: "definition 4"
}
const str = Object.entries(dict).map(([key, value]) => `<dt>${key}</dt><dd>${value}</dd>`).join('');
document.getElementById("out").innerHTML = str;

dt::after {
content: ":"
}
dt {
display: inline-block;
}
dd {
display: inline;
}
dd:after {
content: '';
display: block;
}

<dl id="out"></dl>