Question

我一直试图在HTML的桌子上访问并显示这些数据几个小时，但却无处可去。我使用了$.each函数，但我相信我在某种程度上将数据称为错误如果我错了请纠正我 JSON数据的布局如下：

[
  {
    "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。 我想要显示多个类别I.E：id，name，value等。

$(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');
});

无法显示JSON数组数据

2 个答案: