我需要在网页上输出一个大对象的键值对。当我发现object.entries()可以做到这一点时,我松了一口气。但是我需要对格式进行一些控制,所以我想用一个特殊的类将键包装在span标记内,用span标记包装值,用一个特殊的类包装。
有没有什么简单的方法用html标记包装Object.Entries的输出?
这是我用于在页面上编写对象的代码:
$('.mycontainer').html(Object.entries(myObject));
好吧,这似乎是最简单的方法:
Object.entries(myObject).forEach(([key, value])
=> $('.myContainer').append((
`<span class="k">${key}</span>: <span class="v">${value}</span>`
)));
在使用jQuery时,我将使用append
和text
方法,如下所示:
null
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>