从一个数组填充不同表行中的数据

Question

我有以下关于从一个数组中填充不同表格行中的数据的代码。

我想在不同的行显示数据并在语言列中动态获取语言（如下图）

对象：

{
  "English Name": "English",
  "English Description": "English Description",
  "Hindi Name": "Hindi Name",
  "Hindi Description": "Hindi Description",
  "Marathi Name": "Marathi Name",
  "Marathi Description": "Marathi Description"
}

  $.ajax(settings).done(function(response) {
    var result = JSON.parse(response);

    var colName = [];
    for (var i = 0; i < result.data.length; i++) {
      for (var key in result.data[i]) {
        if (colName.indexOf(key) === -1) {
          colName.push(key);
        }
      }
    }

    console.log(colName);

    var showData = document.getElementById('showData');
    for (i = 0; i < result.data.length; i++) {
      var row = `<tr>
            <td>English</td>
            <td>${result.data[i].EnglishName}</td>
            <td>${result.data[i].EnglishDescription}</td>
        </tr>
        <tr>
            <td>Hindi</td>
            <td>${result.data[i].HindiName}</td>
            <td>${result.data[i].HindiDescription}</td>
        </tr>
        <tr>
            <td>Marathi</td>
            <td>${result.data[i].MarathiName}</td>
            <td>${result.data[i].MarathiDescription}</td>
        </tr>`;
      showData.innerHTML += row;
    }
  });
});

Answer 1

我的猜测是您的 JSON 需要看起来更像这样：

{
  "data": [
    {
      "language": "English",
      "familyName": "English Name",
      "familyDescription": "English Description"
    },
    {
      "language": "Hindi",
      "familyName": "Hindi Name",
      "familyDescription": "Hindi Description"
    },
    {
      "language": "Marathi",
      "familyName": "Marathi Name",
      "familyDescription": "Marathi Description"
    }
  ]
}

如果result.data 包含数组，那么在您的循环中，一行应该如下所示：

var row = `<tr>
        <td>${result.data[i].language}</td>
        <td>${result.data[i].familyName}</td>
        <td>${result.data[i].familyDescription}</td>
    </tr>`;

编辑

如果JSON格式总是一样的，那么就可以key访问，不需要循环：

        <td>English</td>
        <td>result.data["English Name"]</td>
        <td>result.data["English Description"]</td>