版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
有如下需求：
- 将数据通过表格展示。
数据：
issuesSummary = {
Answered: {
Medium: [
{id: "60030011"},
{id: "60030012"},
{id: "60030013"},
{id: "60030014"},
{id: "60030015"}
],
Low: [
{id: "60030021"},
{id: "60030022"},
{id: "60030023"},
{id: "60030024"}
],
},
Closed: {
High: [
{id: "70030011"},
{id: "70030012"},
{id: "70030013"},
{id: "70030014"},
{id: "70030015"},
{id: "70030016"}
]
},
Fixed: {
Medium: [
{id: "80030011"},
{id: "80030012"},
{id: "80030013"}
],
Highest: [
{id: "80030021"}
],
Low: [
{id: "80030031"},
{id: "80030032"}
]
}
}
表格：
规则如下：
- 计算各个种类的各个等级个数
- 数据中没有的为 0
使用 html + js 编写模板：
新建一个 topic1.html， 将下列代码复制到其中：
<html>
<head>
<title>js数据处理实战（一）</title>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>Description</th>
<th>Highest</th>
<th>High</th>
<th>Medium</th>
<th>Low</th>
<th>Total</th>
</tr>
</table>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
// 已有数据
let issuesSummary = {
Answered: {
Medium: [
{id: "60030011"},
{id: "60030012"},
{id: "60030013"},
{id: "60030014"},
{id: "60030015"}
],
Low: [
{id: "60030021"},
{id: "60030022"},
{id: "60030023"},
{id: "60030024"}
],
},
Closed: {
High: [
{id: "70030011"},
{id: "70030012"},
{id: "70030013"},
{id: "70030014"},
{id: "70030015"},
{id: "70030016"}
]
},
Fixed: {
Medium: [
{id: "80030011"},
{id: "80030012"},
{id: "80030013"}
],
Highest: [
{id: "80030021"}
],
Low: [
{id: "80030031"},
{id: "80030032"}
]
}
}
disposeData()
function disposeData () {
const dataList = []
// 这里写处理数据的代码
// 添加到页面
addTable(dataList)
}
function addTable (list) {
list.forEach(item => {
addLine(item.Description, item.Highest, item.High, item.Medium, item.Low, item.Total)
});
}
function addLine (Description, Highest, High, Medium, Low, Total) {
let tr = document.createElement("tr");
let str = '<td>' + Description + '</td>';
str += '<td>' + Highest + '</td>';
str += '<td>' + High + '</td>';
str += '<td>' + Medium + '</td>';
str += '<td>' + Low + '</td>';
str += '<td>' + Total + '</td>';
tr.innerHTML = str;
let tab = document.getElementById("table");
tab.appendChild(tr);
}
</script>
</body>
</html>
Vue模式编写
在线编辑地址：点我