Question

我已经完成了此解决方案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>

我应该如何将动态对象数据插入正文。

Answer 1

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

Answer 2

您可以使用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>

HTML表的动态JSON对象

2 个答案: