如何将嵌套JSON按父键_子键规则动态填充到对应ID的HTML输入框

现有逻辑的核心故障点 #

对照提供的代码和JSON结构，现有填充逻辑无法正常运行的核心原因有四点：

• 顶层字段名不匹配：JSON中对应的采购订单数组字段是purchase_order，但JS代码中读取的是purchase_orders，单复数差异会直接导致数据读取失败
• DOM API拼写错误：代码中写的document.getElementBy是残缺的方法，正确的方法名是document.getElementById
• 嵌套字段的ID匹配逻辑缺失：处理tax_lines数组时，直接用子字段名name、rate作为输入框ID查找，但实际页面上的输入框ID是带父级前缀的tax_lines_name、tax_lines_rate，无法匹配到目标元素
• 冗余无效代码：同一层数组同时写了for循环和forEach遍历，属于无意义的重复执行

通用可扩展实现方案 #

采用全字段路径拼接为输入框ID的规则，配合递归遍历逻辑，无需针对每一层嵌套单独写循环，即可兼容任意层级的平铺/嵌套JSON结构：

1. 统一输入框ID命名规则：嵌套字段的ID格式为父级字段名_当前字段名，保持和现有页面的ID逻辑完全一致，同时避免同名字段冲突
2. 编写通用递归遍历函数：从JSON根节点开始逐层级遍历，每遇到一个叶子节点（非对象/数组的具体值），就拼接出完整的字段路径，匹配对应ID的输入框完成赋值

修正后的完整示例代码 #

data.json

{
  "purchase_order": [
    {
      "id": "1",
      "external_number": "1000",
      "status": "Created",
      "tax_lines": [
        {
          "name": "GST",
          "rate": "0.05"
        }
      ],
      "price_list": [
        {
          "id": "msrp",
          "name": "retail price",
          "currency": "USD"
        }
      ]
    }
  ]
}

HTML结构

<input id="external_number" />
<input id="id"/>
<input id="status" />
<input id="tax_lines_name" />
<input id="tax_lines_rate" />

JS填充逻辑

const data_file = 'data.json';

// 递归遍历JSON完成表单填充
function fillForm(targetObj, parentPath = '') {
  for (const [key, value] of Object.entries(targetObj)) {
    // 拼接当前字段的完整路径作为匹配标识
    const currentPath = parentPath ? `${parentPath}_${key}` : key;
    // 遇到对象/数组结构时，递归向下处理
    if (typeof value === 'object' && value !== null) {
      // 数组类型默认取第一条元素，适配单条详情页场景
      const childNode = Array.isArray(value) ? value[0] : value;
      fillForm(childNode, currentPath);
      continue;
    }
    // 匹配到对应ID的输入框时直接赋值
    const targetInput = document.getElementById(currentPath);
    if (targetInput) {
      targetInput.value = value;
    }
  }
}

function fetchPO() {
  fetch(data_file)
    .then(res => res.json())
    .then(data => {
      // 取采购订单第一条记录执行填充
      const firstPO = data.purchase_order[0];
      fillForm(firstPO);
    })
}

方案特性 #

• 扩展性强：后续新增任意层级的嵌套JSON字段，只要按照ID规则新增对应输入框，无需修改核心填充代码
• 容错性好：自动跳过没有对应输入框的JSON字段，不会因缺省元素抛出错误
• 无冗余逻辑：去掉了重复的循环嵌套，代码执行效率更高

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