无法显示JSON数组数据

Question

我已经尝试访问HTML并将其显示在HTML表格上的数据已经有几个小时了，却一无所获。 我使用了$.each函数，但我认为我以某种方式称呼数据错误， 如果我输入错误， 请更正我 $.each数据的布局如下：

[
  {
    "id": "8ef2d135-73a3-4a58-8858-733f3882290a",
    "userid": "8ef2d135-73a3-4a58-8858-733f3882290a",
    "name": "MN-Carven",
    "placement": 1,
    "platform": "PC",
    "value": 66.29059172668
  },
  {
    "id": "b5af3e4f-8c43-48e4-8d04-e8adf0ae9808",
    "userid": "b5af3e4f-8c43-48e4-8d04-e8adf0ae9808",
    "name": "Tchanos.MTLK",
    "placement": 2,
    "platform": "PC",
    "value": 65.32935808926
  },
  {
    "id": "ee2fcc61-a8d9-4b57-8837-297ace438e3e",
    "userid": "ee2fcc61-a8d9-4b57-8837-297ace438e3e",
    "name": "Lion__.",
    "placement": 3,
    "platform": "PC",
    "value": 57.44590079297
  }
]

据我了解，我可以使用javascript中的$.each函数来访问数组。 我将在下面发布我的JavaScript。 我想显示多个类别的IE：id，名称，值等。

$(function() {
  var aliases = [];
  $.getJSON('leaderboard.json', function(data) {
    $.each(data.aliases, function(i, f) {
      var tblRow = "<tr>" + "<td>" + f.name + "</td>" + "<td>" + f.placement + "</td>" + "</tr>"
      $(tblRow).appendTo("#leaderboard tbody");
    });
  });
});

这是表格的HTML ：

<table id="leaderboard">
  <thead>
    <tr>
      <th>Username</th>
      <th>Place</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">
      </td>
    </tr>
  </tfoot>
</table>

我确定使用$.each是正确的，但是我相信我需要更多指导， 欢迎访问与我的问题有关的文档的任何链接 ，谢谢。

Answer 1

问题的一部分是您试图遍历data.aliases ，但是别名不是数据对象的一部分。 另外，看看用于构建表主体字符串的reduce函数。 我想您可以在这里找到想要的东西：

$.getJSON('leaderboard.json', (data) => {
    const tableData = data.reduce((pre, curr) => {
      return pre + `<tr><td>${curr.name}</td><td>${curr.placement}</td></tr>`;
    }, '');

    $(tableData).appendTo('#leaderboard tbody');
  });

Answer 2

解决了

问题是我的JQuery

解决方法如下：

$.getJSON('leaderboard.json', (data) => {
const tableData = data.reduce((pre, curr) => {
  return pre + `<tr><td>${curr.name}</td><td>${curr.placement}</td></tr>`;
}, '');

$(tableData).appendTo('#leaderboard tbody');
});