如何使用JavaScript从CSV提取单列数据实现风扇转速与状态展示

你可以通过Fetch API读取CSV文件，再按规则解析成键值对对象，就能直接提取对应字段的值，完整实现代码如下：

1. 完整功能代码 #

// 读取并解析CSV，更新页面数据
async function updateFanStatus() {
  try {
    // 读取CSV文件，这里替换成你的CSV实际路径
    const response = await fetch('./fan_status.csv');
    const csvText = await response.text();
    
    // 拆分CSV行，过滤空行
    const lines = csvText.split('\n').filter(line => line.trim() !== '');
    // 第一行是表头，拆成字段数组
    const headers = lines[0].split(',');
    // 第二行是实际数值，拆成数组并转成数字类型
    const values = lines[1].split(',').map(val => Number(val.trim()));
    
    // 拼成键值对对象，方便直接取对应字段
    const fanData = {};
    headers.forEach((header, index) => {
      fanData[header.trim()] = values[index];
    });

    // 更新风扇0转速
    document.getElementById("FCfan0num").innerHTML = fanData.Fan0SP;
    // 风扇1/2/3转速更新按同样格式写即可
    // document.getElementById("FCfan1num").innerHTML = fanData.Fan1SP;

    // 更新风扇0状态灯，原有代码的判断条件是赋值错误，已修正为全等判断
    const fan0Light = document.getElementById("FCfanlight0");
    if (fanData.Fan0ST === 0) {
      fan0Light.className = "FCfanlight0 alert";
    } else {
      fan0Light.className = "FCfanlight0 norm";
    }
    // 其他风扇的状态灯更新同理
    // const fan1Light = document.getElementById("FCfanlight1");
    // if (fanData.Fan1ST === 0) {
    //   fan1Light.className = "FCfanlight1 alert";
    // } else {
    //   fan1Light.className = "FCfanlight1 norm";
    // }

  } catch (err) {
    console.error('读取CSV失败：', err);
  }
}

// 页面加载完成后执行，需要定时更新的话可以加setInterval
window.addEventListener('load', () => {
  updateFanStatus();
  // 如果需要每秒刷新一次数据，取消下面的注释，间隔时间可自行调整（单位为毫秒）
  // setInterval(updateFanStatus, 1000);
});

2. 注意事项 #

• 替换代码中./fan_status.csv为你实际的CSV文件存放路径
• 你原有状态灯代码中的if (data=0)是赋值操作，会导致逻辑错误，已修正为===全等判断
• 本地直接打开HTML文件测试会触发跨域限制，建议部署到本地服务（比如VSCode的Live Server插件）测试

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