Я пытаюсь создать div таблиц, но застрял с добавлением только первого элемента в каждую таблицу.Я получаю таблицы только с первой парой ключ-значение.Я сопоставляю свой массив данных, но застрял при доступе к ключам и значениям в моих таблицах.Я чувствую, что застрял в функции createTableData.
HTML
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1 class="text-center mb-3">
Active Directory Replication Health
</h1>
</div>
<div id="table"></div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/script.js"></script>
Скрипт
var data = [
{
"DC": "SV07CTDC1",
"Connectivity": "Passed",
"Advertising": "Failed"
},
{
"DC": "SVGCCTDC1",
"Connectivity": "Passed",
"Advertising": "Failed"
}
];
function createTableData(dc ){
for( key in dc )
return `
<tr>
<td> ${key} </td>
<td> ${dc[key]} </td>
</tr>
`
}
function createTable(dc) {
return `
<div class="col-md-3 col-sm-6 ">
<table class="table table-dark table-striped table-bordered table-hover">
${createTableData(dc)}
</table>
</div>
`
}
document.getElementById("table").innerHTML = `
<div class="row">
${data.map(createTable).join("")}
</div>
`