無法顯示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');
});