JavaScript将含嵌套数组的JSON数据转换为HTML表格问题求助

问题本质 #

你当前使用的API返回的设备数据为平行数组结构（MAC、IP、区域分别存储为独立数组），而Knockout的foreach绑定默认期望每行对应一个包含单条设备全量属性的对象，直接绑定数组时会自动调用toString()方法，因此出现逗号拼接所有元素的情况。

最优方案：预处理数据为标准对象数组 #

在绑定数据前先将平行数组转换为和你给出的「可正常工作的无嵌套JSON」结构一致的对象数组，该方案逻辑解耦、易维护，也可兼容异常场景。

预处理代码示例 #

MACLIST = ["ABC","DEF"]
IPLIST = ["10.10.10.10","20.20.20.20"]
ZONELIST = ["Inside","Outside"]
var rawJson = [{"MAC":MACLIST,"IP":IPLIST,"ZONE":ZONELIST},{"SOMETHING ELSE":"OK"}];

// 数据格式化方法
function formatDeviceData(raw) {
  // 提取包含设备属性的有效数据项
  const deviceRawItem = raw.find(item => item.MAC && item.IP && item.ZONE);
  if (!deviceRawItem) return [];
  const { MAC, IP, ZONE } = deviceRawItem;
  // 按索引拼接为单设备对象数组
  return MAC.map((macVal, idx) => ({
    MAC: macVal,
    IP: IP[idx] ?? "",
    ZONE: ZONE[idx] ?? ""
  }))
}

// 绑定格式化后的数据
$(document).ready(function () {
    ko.applyBindings({
        teams: formatDeviceData(rawJson)
    });
});

HTML代码无需修改 #

原有HTML表格绑定逻辑可直接复用，无需额外调整。

备用方案：模板内嵌套绑定（不推荐） #

如果不想修改数据处理逻辑，可直接在模板内通过索引取值，但该方案硬编码依赖数据结构，容错性差，仅可临时使用：

<tbody data-bind="foreach: teams[0].MAC">
    <tr>
        <td data-bind="text: $data"></td>
        <td data-bind="text: $parent.teams[0].IP[$index()]"></td>
        <td data-bind="text: $parent.teams[0].ZONE[$index()]"></td>
    </tr>
</tbody>

内容的提问来源于stack exchange，提问作者James G