时间戳

首页 > 解决方案 > 分隔字符串数组以创建表格行

javascript - 分隔字符串数组以创建表格行

问题描述

我正在进行 API 调用并以以下格式检索 JSON：

"1": ["building 1 name","building 1 floor","building 1 room"],
"2": ["building 2 name","building 2 floor","building 2 room"],
"n": ["building n name","building n floor","building n room"]

我最终要做的是将所有这些数据呈现在一个表中，其中表的每一行都由数组中的项目组成，如下所示：

<tr>
<td>building 1 name</td><td>building 1 floor</td><td>building 1 room</td>
</tr>

但是，我的日子比我想象的要艰难得多。

我想我知道我需要遍历数组并提取每个项目的值，例如：

const data = APIResponse;
for(let i in data) {
    // Do something here to get each value out
}

但是，承认很尴尬……我被困住了。我正在努力自学，但我确信这是我应该真正了解的基本知识。

标签： javascriptarrays

解决方案

您几乎完成了，该i变量包含当前键，因此您需要做的更多是遍历每个数组并生成 HTML，可能像这样：

const data = {
    "1": ["building 1 name","building 1 floor","building 1 room"],
    "2": ["building 2 name","building 2 floor","building 2 room"],
    "n": ["building n name","building n floor","building n room"]
}

var html = "";
for(let key in data) {
    html += `<tr>`;
    for(let idx in data[key]) {
        html += `<td>${data[key][idx]}</td>`;
    }
    html += `</tr>`;
}
document.getElementById("table").innerHTML = html;
<html>
<body>
<table id="table">

</table>
</body>
</html>

推荐阅读