如何使用Javascript将嵌套的JSON映射到HTML表
如何使用Javascript将嵌套的JSON映射到HTML表
提问于 2018-07-05 04:44:40
我有来自API的JSON数据，该API包含不同位置的用户。我希望将其映射到一个HTML表，该表看起来与下面共享的表类似。
HTML表格：
JSON数据：
{
"data": [{
"location": "Location 1",
"Address": "location 1, Address",
"users": [{
"name": "Location 1 User",
"state": "Active"
}]
}, {
"location": "Location 2",
"Address": "Location 2, Address",
"users": [{
"name": "Location 2 User",
"state": "Active"
},
{
"name": "Location 2 User",
"state": "Inactive"
}
]
}]
}如果您在第三列中注意到，第二个位置的两个用户都被添加到一个td元素中，并在一个单元格中列出。我想用原始的Javascript把我的JSON转换成这样的表。
我已经尝试了不同的方法，但没有运气，所以在这方面的任何帮助将不胜感激！
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-05 08:25:02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="2">Location Name</th>
<th colspan="2">Address</th>
<th colspan="2">User Working</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
<script>
json_data =
{
"data": [{
"location": "Location 1",
"Address": "location 1, Address",
"users": [{
"name": "Location 1 User",
"state": "Active"
}]
}, {
"location": "Location 2",
"Address": "Location 2, Address",
"users": [{
"name": "Location 2 User",
"state": "Active"
},
{
"name": "Location 2 User",
"state": "Inactive"
}
]
}]
}
//Accessing the JSON Document using these loops
Object.keys(json_data['data']).forEach(key => {
var tr = document.createElement('tr');
tr.className = 'cell'
document.getElementsByTagName('tbody')[0].appendChild(tr);
Object.keys(json_data['data'][key]).forEach(key2 => {
var td = document.createElement('td');
td.setAttribute('colspan', '2');
if (key2 === 'users') {
Object.keys(json_data['data'][key][key2]).forEach(key3 => {
if (key3 > 0) {
td.innerHTML = td.innerHTML + ', ' + json_data['data'][key][key2][key3]['name'];
}
else {
td.innerHTML = td.innerHTML + json_data['data'][key][key2][key3]['name'];
}
})
}
else {
td.innerHTML = json_data['data'][key][key2];
}
document.getElementsByClassName('cell')[key].appendChild(td);
})
});
</script>代码非常简单。需要注意的主要内容是Object.keys()、.forEach()循环和createElements
可以有一种更简单的方法来做到这一点，但是嘿，它是有效的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51180552
复制相关文章
相似问题
腾讯云开发者
