我有类似的东西，但是更大。
[{
"votes":200,
"invalid_votes":140,
"valid_votes":60,
"voting_section":{"level":2, "zone1":"US", "zone2":"Delaware"}
},
{
"votes":300,
"invalid_votes":40,
"valid_votes":260,
"voting_section":{"level":3, "zone1":"US", "zone2":"California", "zone3":"Los Angeles"}
}]
我花了几个小时尝试将此数组转换为表格。
我的目标是将投票部分中的最后一个区域(在我们的示例中为 zone2 和 zone3)放入表的第一列(例如，第一列将有 2 行:特拉华州和洛杉矶。
在表的标题中，我想放置所有其他属性(投票、invalid_votes、valid_votes)。
交集将用以下值完成:
所以它必须是这样的:
到目前为止，我已经有了我的代码，但我认为我没有朝着好的方向发展:
function createTableKeyValue2(arrObjects, parentDiv) {
var elTable = document.createElement("table");
elTable.className = "table table-striped table-bordered";
var elTableBody = document.createElement("tbody");
for (var i = 0; i < arrObjects.length; i++) {
var elTableRow = document.createElement("tr");
var elTableDataKey = document.createElement("td");
elTableDataKey.innerHTML = arrObjects[i];
var elTableDataValue = document.createElement("td");
elTableDataValue.innerHTML = arrObjects[i];
//elTableDataValue.id = arrObjects[i].key.split(' ').join('_');
elTableRow.appendChild(elTableDataKey);
elTableRow.appendChild(elTableDataValue);
elTableBody.appendChild(elTableRow);
}
elTable.appendChild(elTableBody);
parentDiv.append(elTable);
}
var votingSection = function(zone) {
var voting_section = [];
var level = zone[0].voting_section.level;
for (var i = 0; i < zone.length; i++) {
voting_section.push(zone[i].voting_section['zone' + level]);
}
return voting_section;
};
createTableKeyValue(votingSection(zone2), resultsTableDiv);
resultTableDiv 是 DOM 中的一个节点。
最佳答案
我将你的问题解释为好像你想从 Voting_section 中提取 1 个区域，该区域应该附加最高的数字。
var data = [{
"votes": 200,
"invalid_votes": 140,
"valid_votes": 60,
"voting_section": {
"level": 1,
"zone1": "US",
"zone2": "Delaware"
}
},
{
"votes": 300,
"invalid_votes": 40,
"valid_votes": 260,
"voting_section": {
"level": 1,
"zone1": "US",
"zone2": "California",
"zone3": "Los Angeles"
}
}
],
html = "";
function getLastZone(voting_section) {
var highestZone = {
zoneNumber: null,
zoneText: null
};
for (var zone in voting_section) {
var checkZone = /zone(\d)/g.exec(zone);
if (checkZone) {
if (parseInt(checkZone[1]) > highestZone.zoneNumber) {
highestZone = {
zoneNumber: [checkZone[1]],
zoneText: voting_section[zone]
};
}
}
}
return highestZone.zoneText;
}
data.forEach(function(e, i) {
html += "<tr>" + "<td>" + getLastZone(e.voting_section) + "</td>" +
"<td>" + e.votes + "</td>" +
"<td>" + e.valid_votes + "</td>" +
"<td>" + e.invalid_votes + "</td>" + "</tr>";
})
document.getElementById("putHere").innerHTML = html;table {
border-collapse: collapse;
border-left: 1px solid #bbbbbb;
border-top: 1px solid #bbbbbb;
}
th, td {
border-right: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
}<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<table>
<thead>
<th>Zone</th>
<th>Votes</th>
<th>Valid Votes</th>
<th>Invalid Votes</th>
</thead>
<tbody id="putHere"></tbody>
</table>
</body>
</html>关于对象数组中的 Javascript 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44273210/