如何从JSON数组提取对象值并赋值给对应id的HTML input字段

你的代码有3个核心错误，导致无法正确赋值：

• 遍历目标错误：直接遍历整个response对象时，只会拿到顶层的两个属性COLUMNS和DATA，根本取不到具体的字段值
• 赋值方法错误：append()是向DOM元素内部插入子节点用的，<input>是单标签表单元素，填充值需要用.val()方法
• 取值索引错误：两个输入框都取zc[0]，就算遍历路径正确，也拿不到州缩写的对应值

你的接口返回结构是典型的列式数据结构：COLUMNS数组按顺序存字段名，DATA是二维数组，每个子数组代表一行数据，值的顺序和COLUMNS里的字段顺序一一对应。

单条数据快速赋值（适配你当前的返回结构） #

如果返回的DATA里始终只有1条数据，不需要循环，直接取值赋值即可：

// 取第一行数据
const rowData = response.DATA[0];
// 按索引对应关系给input赋值
$("#cityname").val(rowData[0]); // 第0位对应cityname，值为"Culver City"
$("#stateabbr").val(rowData[1]); // 第1位对应stateabbr，值为"CA"

通用兼容写法（不硬编码索引，适配字段顺序变化） #

如果后续接口可能调整COLUMNS的返回顺序，可以先做字段名和索引的映射，自动匹配赋值，避免硬编码索引出错：

// 先构建字段名到索引的映射表
const colMap = {};
response.COLUMNS.forEach((colName, index) => {
  colMap[colName] = index;
});

// 遍历所有数据行赋值（兼容单条/多条数据返回）
response.DATA.forEach(row => {
  Object.keys(colMap).forEach(fieldId => {
    // 自动找到对应id的input，填入匹配的值
    $(`#${fieldId}`).val(row[colMap[fieldId]]);
  });
});

• 所有业务数据都存储在response.DATA数组中，不要直接遍历整个response根对象
• 所有表单元素（input、select、textarea）的赋值都要用.val()方法，不要用append()、html()这类操作元素子节点的方法
• 赋值前确认字段索引和COLUMNS的顺序对应，避免取值错位

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