如何在 web 頁面上漂亮地打印 JavaScript object 的鍵和值

Question

我有一個包含術語和定義的 JavaScript object。 我想創建一個 function 來顯示/打印網頁上的鍵值對。

例如：

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

理想 output：

term1：定義

term2：定義

術語 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

我們使用 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>