将Object.entries(myObject)输出包裹在html标记中

Question

我需要在网页上输出一个大对象的键值对。发现Object.entries((可以做到这一点，我松了一口气。但我需要对格式进行一些控制，所以我想用一个特殊类将键封装在span标记中，并用一个特定类将值封装在span标签中。

有什么简单的方法可以用html标记包装Object.entries的输出吗？

这是我用来在页面上写对象的代码：

$('.mycontainer').html(Object.entries(myObject));

Answer 1

当您使用jQuery时，我会使用append和text方法，如下所示：

let obj = {
name: "Helen",
age: 26,
gender: "female"
};
$(".container").empty().append(
$("<table>").append(
Object.entries(obj).map(pair =>
$("<tr>").append(
pair.map(item => $("<td>").text(item))
)
)
)
);

.container td:first-child {
background: silver;
text-align: right;
color: white;
}
.container td:last-child {
background: lightyellow;
}
.container td {
padding: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container"></div>

Answer 2

好吧，这似乎是最简单的方法：

Object.entries(myObject).forEach(([key, value]) 
=> $('.myContainer').append((
`<span class="k">${key}</span>: <span class="v">${value}</span>`
))); 

Answer 3

Object.entries(myObject)返回数组。

所以你不能像$('.mycontainer').html(Object.entries(myObject));那样在这里，您不能直接将数组分配给html。

更好的解决方案是可以迭代throw元素并打印到HTML。示例：

Object.entries(myObject).forEach(([key, value]) {
$(".myContainer").append(
`<div>
<span>${key}</span>: <span>${value}</span>
</div><br/>`
);
});