无法使用Javascript在HTML页面上显示JSON文件中的多个值

Question

我正在尝试在 HTML 页面中显示项目，下面有我想要显示的 JSON 结果。所有单个值都显示在 HTML 页面中，但是如果我有多个值，例如“Diskusage”字段（单元格 4），则它不会显示任何内容。我想显示所有这些多个值，并且还有一些颜色控制，即如果琥珀色使用率高于 70%，红色使用率高于 90% 等..

有人可以帮忙吗

JSON

{
    "Services_AutoNotRunning":  [
                                    "RemoteRegistry",
                                    "sppsvc"
                                ],
    "GroupName":  "Basic",
    "MemoryFreePercentage":  86.71,
    "DiskUsage":  [
                      {
                          "DriveLetter":  "C:",
                          "FreeSpacePercent":  54.04
                      },
                      {
                          "DriveLetter":  "D:",
                          "FreeSpacePercent":  37.72
                      },
                      {
                          "DriveLetter":  "F:",
                          "FreeSpacePercent":  49.06
                      }
                  ],
    "WindowsUpdateService":  1,
    "ReportedAt":  "2025-01-20 10:14:41",
    "Hostname":  "01",
    "Online":  true,
    "CPUFreePercentage":  5.75,
    "LastWindowsUpdateDate":  "2025-01-18 00:00:00"
},

HTML

function addBasicChecksRow(row, data) {
        const hostnameCell = row.insertCell(0);
        hostnameCell.innerText = data.Hostname || '';
       
        const onlineCell = row.insertCell(1);
        onlineCell.innerText = data.Online ? 'Online' : '';
        if (data.Online) {
            onlineCell.style.backgroundColor = '#aaffaa'; // Green for Online
        } else if (data.Online === false) {
            onlineCell.style.backgroundColor = '#ffcccc'; // Red for Offline
        }

        const cpuFreeCell = row.insertCell(2);
        cpuFreeCell.innerText = data.CPUFreePercentage || '';
        if (data.CPUFreePercentage > 90) {
            cpuFreeCell.style.backgroundColor = '#ffcccc'; // Red if below 20%
        } else if (data.CPUFreePercentage > 80) {
            cpuFreeCell.style.backgroundColor = '#ffeb99'; // Yellow if below 50%
        } else if (data.CPUFreePercentage !== undefined) {
            cpuFreeCell.style.backgroundColor = '#aaffaa'; // Green if above 50%
        }

        const memoryFreeCell = row.insertCell(3);
        memoryFreeCell.innerText = data.MemoryFreePercentage || '';
        if (data.MemoryFreePercentage < 20) {
            memoryFreeCell.style.backgroundColor = '#ffcccc'; // Red if below 20%
        } else if (data.MemoryFreePercentage < 50) {
            memoryFreeCell.style.backgroundColor = '#ffeb99'; // Yellow if below 50%
        } else if (data.MemoryFreePercentage !== undefined) {
            memoryFreeCell.style.backgroundColor = '#aaffaa'; // Green if above 50%
        }

        const diskUsageCell = row.insertCell(4);
        diskUsageCell.innerText = data.DiskUsage ? `${data.DiskUsage.FreeSpacePercent}% free` : '';
        if (data.DiskUsage && data.DiskUsage.FreeSpacePercent < 20) {
            diskUsageCell.style.backgroundColor = '#ffcccc'; // Red if disk space is below 20%
        } else if (data.DiskUsage && data.DiskUsage.FreeSpacePercent < 50) {
            diskUsageCell.style.backgroundColor = '#ffeb99'; // Yellow if below 50%
        } else if (data.DiskUsage && data.DiskUsage.FreeSpacePercent !== undefined) {
            diskUsageCell.style.backgroundColor = '#aaffaa'; // Green if above 50%
        }

Answer 1

您的问题源于您尝试访问不存在的值的事实 - 由于键

data.DiskUsage.FreeSpacePercent

没有附加任何值，代码会将值

undefined

插入到表行中。虽然您的 JSON 数据现在看起来像这样：

"DiskUsage": [
  {
    "DriveLetter": "C:",
    "FreeSpacePercent": 54.04
  },
  {
    "DriveLetter": "D:",
    "FreeSpacePercent": 37.72
  },
  {
    "DriveLetter": "F:",
    "FreeSpacePercent": 49.06
  }
]

您的代码期望它看起来更像以下内容：

"DiskUsage": {
  "FreeSpacePercent": 54.04
}

因此，您需要更改 JSON 格式或修改确定

FreeSpacePercent

的方式。一种方法是迭代

DiskUsage

数组中的每个对象，以获得驱动器中的

FreeSpacePercent

平均值，如下所示：

const averageFree = diskUsage.reduce((s, drive) => s + drive["FreeSpacePercent"], 0) / diskUsage.length;

了解更多关于

reduce

方法的信息这里。