动态 JSON 对象到 Html 表答案

【问题标题】：Dynamic JSON object to Html Table动态 JSON 对象到 Html 表
【发布时间】：2019-12-23 08:28:40
【问题描述】：

我已经完成了这个解决方案 Parsing JSON objects for HTML table 。但是在这个解决方案中，对象键是在创建表时预定义的。但是我有一些可以包含随机数据的 json 数据。

有时可以：

var data = {
"C#": 2172738,
"CSS": 9390,
"HTML": 135085,
"Java": 337323
}

或者，有时可以：

var data = {
"Go": 2172738,
"Ruby": 9390,
"Dart": 135085
}

这意味着密钥不是固定的。该数据对象可以是动态的。我想将动态对象转换为 html 表。假设我有一个表，其中定义了 thead 而 tbody 为空：

<table id="_myTable">
 <thead>
  <th>Language</th>
  <th>Line of Codes</th>
</thead>
  <tbody>
  </tbody>
</table>

我应该如何将该动态对象 data 插入到 tbody。

【问题讨论】：

标签： javascript html json

【解决方案1】：

您可以使用for...in、Template literals 和element.insertAdjacentHTML(position, text); 来完成您的任务：

var data = {
    "C#": 2172738,
    "CSS": 9390,
    "HTML": 135085,
    "Java": 337323
}
for (key in data) {
    var tr = `<tr><td>${key}</td><td>${data[key]}</td></tr>`;
    document.querySelector('#_myTable tbody').insertAdjacentHTML('beforeend', tr);
}

<table id="_myTable">
    <thead>
    <th>Language</th>
    <th>Line of Codes</th>
    </thead>
    <tbody>
    </tbody>
</table>

【讨论】：

【解决方案2】：

您可以使用Object.keys(data) 获取“语言”表数据的所有键，并使用Object.values(data) 或Object.keys(data).map(key => data[key]) 获取“代码行”表数据。

【讨论】：