使用jQuery与for in遍历JSON无法获取对象及数组元素的问题

核心思路 #

你拿到的SAP JSON是字段-数组的横向结构，每条工单对应所有数组的同索引位置元素。正确的处理逻辑是：

1. 取任意字段数组的长度作为工单总数（比如SeqNo数组的长度）
2. 遍历每个索引，从每个字段数组中取出对应位置的值
3. 拼接成需求格式的字符串，再生成页面选择控件

代码实现 #

原生JavaScript版本（无需依赖jQuery）

function checkId() {
  var sapexport = {
    "SeqNo": ["000000", "000000"],
    "OpNo": ["0100", "0200"],
    "OpDesc": ["ASSEMBLE, PER DBI & DRAWING", "FINAL INSPECT PER DBI & DWG"],
    "WorkCent": ["8000", "7000"],
    "WorkCentText": ["ASSEMBLY (SURFACE)", "QC INSPECTIONS"]
  };

  // 获取工单总数（取任意字段数组长度即可）
  const totalOrders = sapexport.SeqNo.length;
  const orderStrings = [];

  // 遍历每个工单索引，拼接字符串
  for (let i = 0; i < totalOrders; i++) {
    const orderStr = `SeqNo: ${sapexport.SeqNo[i]}, OpNo:${sapexport.OpNo[i]}, OpDesc: ${sapexport.OpDesc[i]}, WorkCent: ${sapexport.WorkCent[i]}, WorkCentText: ${sapexport.WorkCentText[i]}`;
    orderStrings.push(orderStr);
  }

  // 生成页面选择控件
  renderOrderSelect(orderStrings, sapexport);
}

// 生成Bootstrap风格的下拉选择框
function renderOrderSelect(orderStrings, rawData) {
  const selectEl = document.getElementById('order-select');
  selectEl.innerHTML = '<option value="">请选择工单</option>';

  orderStrings.forEach((str, index) => {
    const option = document.createElement('option');
    option.textContent = str;
    option.value = index;
    selectEl.appendChild(option);
  });

  // 绑定选中事件，准备发送数据到OPC Router
  selectEl.addEventListener('change', function() {
    if (this.value === '') return;
    const selectedIndex = parseInt(this.value);
    // 提取选中的完整工单数据
    const selectedOrder = {
      SeqNo: rawData.SeqNo[selectedIndex],
      OpNo: rawData.OpNo[selectedIndex],
      OpDesc: rawData.OpDesc[selectedIndex],
      WorkCent: rawData.WorkCent[selectedIndex],
      WorkCentText: rawData.WorkCentText[selectedIndex]
    };
    // 发送到OPC Router（替换为实际接口逻辑）
    sendToOPCRouter(selectedOrder);
  });
}

// 模拟发送到OPC Router的函数
function sendToOPCRouter(orderData) {
  console.log('发送工单数据:', orderData);
  // 实际项目中替换为AJAX请求：
  /*
  fetch('你的OPC Router接口地址', {
    method: 'POST',
    body: JSON.stringify(orderData),
    headers: { 'Content-Type': 'application/json' }
  }).then(res => {
    alert('工单发送成功');
  }).catch(err => {
    alert('工单发送失败');
  });
  */
}

jQuery版本（适配你的原有技术栈）

function checkId() {
  var sapexport = {
    "SeqNo": ["000000", "000000"],
    "OpNo": ["0100", "0200"],
    "OpDesc": ["ASSEMBLE, PER DBI & DRAWING", "FINAL INSPECT PER DBI & DWG"],
    "WorkCent": ["8000", "7000"],
    "WorkCentText": ["ASSEMBLY (SURFACE)", "QC INSPECTIONS"]
  };

  const totalOrders = sapexport.SeqNo.length;
  const orderStrings = [];

  for (let i = 0; i < totalOrders; i++) {
    const orderStr = `SeqNo: ${sapexport.SeqNo[i]}, OpNo:${sapexport.OpNo[i]}, OpDesc: ${sapexport.OpDesc[i]}, WorkCent: ${sapexport.WorkCent[i]}, WorkCentText: ${sapexport.WorkCentText[i]}`;
    orderStrings.push(orderStr);
  }

  // 生成Bootstrap下拉框
  const $select = $('#order-select').empty().append('<option value="">请选择工单</option>');
  $.each(orderStrings, function(index, str) {
    $select.append(`<option value="${index}">${str}</option>`);
  });

  // 绑定选中事件
  $select.on('change', function() {
    const selectedIndex = $(this).val();
    if (!selectedIndex) return;
    const selectedOrder = {
      SeqNo: sapexport.SeqNo[selectedIndex],
      OpNo: sapexport.OpNo[selectedIndex],
      OpDesc: sapexport.OpDesc[selectedIndex],
      WorkCent: sapexport.WorkCent[selectedIndex],
      WorkCentText: sapexport.WorkCentText[selectedIndex]
    };
    sendToOPCRouter(selectedOrder);
  });
}

function sendToOPCRouter(orderData) {
  $.ajax({
    url: '你的OPC Router接口地址',
    method: 'POST',
    data: orderData,
    success: function() {
      alert('工单发送成功');
    },
    error: function() {
      alert('工单发送失败');
    }
  });
}

原有代码失效原因 #

你之前用$.each(mydata, function(index, value))遍历的是JSON对象的键名（比如SeqNo、OpNo），而非工单索引，所以每次拿到的value是整个字段数组，不是单个元素。用for/in遍历对象键时，如果误将数组字符串化后遍历，就会返回单个字符，这是因为字符串会被当成字符数组处理。

配套HTML（Bootstrap） #

<div class="container mt-4">
  <div class="form-group">
    <label for="order-select">选择工单</label>
    <select id="order-select" class="form-control">
      <option value="">请选择工单</option>
    </select>
  </div>
</div>

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