如何用jQuery按条件从AJAX响应数据提取属性并填充表单？

原有代码的问题定位 #

硬索引取data.keys[0].parameters.KeysUserName的写法存在两个核心缺陷：

• 没有先校验顶层showParameters的开关值，不满足条件时也会执行取值逻辑
• 没有对keys数组做条件过滤，硬绑定索引位置，一旦数组元素顺序调整就会取到错误的值

分步实现逻辑 #

• 前置开关校验：仅当返回数据的showParameters属性值严格等于字符串'true'时，才执行后续的取值、填充操作
• 精准匹配目标数组元素：从固定长度为2的keys数组中，通过profile === 'MOBILE'的条件定位目标元素，不依赖固定索引取值
• 字段提取与填充：从匹配到的目标元素的parameters属性下，精准提取KeysUserName、RegistrationCode字段值，完成文本输入框的内容填充

可直接复用的参考代码 #

// AJAX成功回调中处理返回数据
function processAjaxResult(data) {
  // 开关校验，不满足条件直接终止
  if (data.showParameters !== 'true') return;

  // 数组元素精准过滤
  const mobileTarget = data.keys.find(item => item.profile === 'MOBILE');
  if (!mobileTarget?.parameters) return;

  // 提取目标字段
  const inputUserName = mobileTarget.parameters.KeysUserName;
  const inputRegCode = mobileTarget.parameters.RegistrationCode;

  // 填充对应输入框（替换成你页面实际的元素选择器）
  document.getElementById('userNameTextBox').value = inputUserName ?? '';
  document.getElementById('regCodeTextBox').value = inputRegCode ?? '';
}

常见踩坑提醒 #

注意几个容易导致取值失败的细节：

• 判断showParameters的值时用严格相等匹配，接口返回的是字符串类型的'true'，不要直接和布尔值true做比较
• 取值时注意字段名的大小写完全匹配，确保和接口返回的字段名（比如KeysUserName而非keysUserName）完全一致
• 不硬编码keys数组的固定索引，哪怕当前接口返回的MOBILE项固定在0索引位置，也建议通过条件匹配定位，降低接口结构变动带来的维护成本

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