servicepoint/watchid字段JSON数组转HTML表格异常排查

表格渲染异常由三个核心错误导致：

• 传参类型错误：你用JSON.stringify(data)把原生JS对象数组序列化成了JSON字符串，传入constructTable后，函数遍历字符串时会把字符索引（0、1、2……）识别为对象键，最终只渲染出列名为0的单列，无法读取到servicepoint、watchid字段。
• HTML结构错误：你把页面可见的容器、按钮、表格全部写在了<head>标签内部，浏览器渲染时会自动把这部分DOM挪移到body区域，容易引发脚本加载顺序、DOM查询的异常。
• 事件绑定参数缺失：按钮的内联点击事件只传了表格选择器，没有传入数据参数，手动点击触发时会直接因为data为undefined报错。

1. 修正传参逻辑：直接把解析完成的原生JS对象数组传给表格渲染函数，不要传入序列化后的JSON字符串。
2. 调整HTML结构：把所有可见DOM元素移到<body>标签内，<head>只保留meta配置、脚本和样式引入。
3. 增加表格清空逻辑：重复渲染前先清空表格已有内容，避免表头、行数据重复叠加。
4. 改用JS绑定事件：替换内联事件绑定，避免参数传递遗漏。

HTML文件 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.2/xlsx.full.min.js"></script>
    <script src='https://unpkg.com/tesseract.js@v2.1.0/dist/tesseract.min.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src='excelexportjs.js'></script>
    <script src='mains.js'></script>
</head>
<body>
    <div class="container mt-5 ">
        <div id="dvjson"></div>
        <p id = "GFG_UP" style="font-size:15px;"></p>
        <button type="button" id="convertBtn" class="btn btn-danger">Convert To Table</button>
        <table align="center" id="table" border="1"></table>
    </div>
</body>
</html>

mains.js文件 #

// 全局存储解析完成的数据，供按钮点击调用
let tableData = [];

(async () => {
  const { data: { text } } = await readFile('sd.png');
  const data = await parseDataFromTextAndPropertyNames(text, ['servicepoint', 'watchid']);
  document.getElementById("dvjson").innerHTML = JSON.stringify(data, undefined, 4);
  tableData = data;
  // 直接传入对象数组，不要传序列化后的JSON字符串
  constructTable('#table', tableData);

  $("#table").excelexportjs({
    containerid: "table", 
    datatype: 'table', 
    dataset: data, 
    columns: getColumns(data)     
  });
  const result = await writeParsedTextDataAsJSON('myjsonfile.json', data);
  console.log({ result });
})();

function constructTable(selector,data) {
  // 渲染前清空表格已有内容，避免重复渲染
  $(selector).empty();
  // 生成表头、获取列名集合
  var cols = Headers(data, selector); 
  // 遍历数据生成表格行
  for (var i = 0; i < data.length; i++) {
    var row = $('<tr/>');  
    for (var colIndex = 0; colIndex < cols.length; colIndex++) {
      var val = data[i][cols[colIndex]];
      if (val == null) val = ""; 
      row.append($('<td/>').html(val));
    }
    $(selector).append(row);
  }
}
         
function Headers(data, selector) {
  var columns = [];
  var header = $('<tr/>');
  for (var i = 0; i < data.length; i++) {
    var row = data[i];
    for (var k in row) {
      if ($.inArray(k, columns) == -1) {
        columns.push(k);
        header.append($('<th/>').html(k));
      }
    }
  }
  $(selector).append(header);
  return columns;
}

// 绑定按钮点击事件
$('#convertBtn').on('click', () => {
  constructTable('#table', tableData);
})

修复后表格会正确生成servicepoint、watchid两列，每一行对应JSON数组中的单条数据，不会再出现单列0的异常渲染问题。

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