提问者:小点点

将Object.Entries(myObject)输出包装在html标记中


我需要在网页上输出一个大对象的键值对。当我发现object.entries()可以做到这一点时,我松了一口气。但是我需要对格式进行一些控制,所以我想用一个特殊的类将键包装在span标记内,用span标记包装值,用一个特殊的类包装。

有没有什么简单的方法用html标记包装Object.Entries的输出?

这是我用于在页面上编写对象的代码:

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

共2个答案

匿名用户

好吧,这似乎是最简单的方法:

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

匿名用户

在使用jQuery时,我将使用appendtext方法,如下所示:

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>