如何使用AJAX将不同结构的JSON数据渲染到HTML表格中

你只需要调整buildTable函数的遍历逻辑即可，无需改动现有HTML代码，即可得到和之前完全一致的渲染效果。

新的JSON结构为单对象格式，键对应人称代词（PERSONAL PRONOUN），值对应变位结果（CONJUGATION），修改后的buildTable代码如下：

buildTable = (data) => {
  let table = document.getElementById("myTable");
  // 每次渲染前清空旧内容，避免重复请求时内容叠加
  table.innerHTML = "";
  // 遍历对象的键值对
  for (const [personalPronoun, conjugation] of Object.entries(data)) {
    let row = `<tr>
                <td>${personalPronoun}</td>
                <td>${conjugation}</td>
              </tr>`;
    table.innerHTML += row;
  }
};

如果需要兼容低版本浏览器，可以使用for...in写法：

buildTable = (data) => {
  let table = document.getElementById("myTable");
  table.innerHTML = "";
  for (let key in data) {
    // 过滤原型链上的额外属性
    if (data.hasOwnProperty(key)) {
      let row = `<tr>
                  <td>${key}</td>
                  <td>${data[key]}</td>
                </tr>`;
      table.innerHTML += row;
    }
  }
};

如果需要同时兼容新旧两种JSON结构，可以增加类型判断逻辑：

buildTable = (data) => {
  let table = document.getElementById("myTable");
  table.innerHTML = "";
  // 兼容数组格式的旧JSON
  if (Array.isArray(data)) {
    for (let i = 0; i < data.length; i++) {
      let row = `<tr>
                  <td>${data[i].personal_pronoun}</td>
                  <td>${data[i].conjugation}</td>
                </tr>`;
      table.innerHTML += row;
    }
  } else {
    // 适配对象格式的新JSON
    for (const [personalPronoun, conjugation] of Object.entries(data)) {
      let row = `<tr>
                  <td>${personalPronoun}</td>
                  <td>${conjugation}</td>
                </tr>`;
      table.innerHTML += row;
    }
  }
};

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