javascript - 通过验证条件将多个 json 文件中的数据打印到单个 html 表中

Question

由于我是 JS 和 JSON 的新手，我很难找到适合我的正确解决方案。我有两个不同的 json 文件。第一个:players.json 包含以下数据:

{
    "players": [
        {
            "id": 109191123,
            "surname": "Farah",
            "full_name": "Robbie Farah",
            "short_name": "R. Farah",
            "other_names": "Robert",
            "jumper_number": 9,
            "position_code": "CEN1",
            "position_order": 9,
            "position_description": "Hooker",
            "is_captain": false,
            "is_interchange": false
        },
        {
            "id": 109509,
            "surname": "Rapana",
            "full_name": "Jordan Rapana",
            "short_name": "J. Rapana",
            "other_names": "Jordan",
            "jumper_number": 1,
            "position_code": "FBCK",
            "position_order": 1,
            "position_description": "Full Back",
            "is_captain": false,
            "is_interchange": false
        },
        {
            "id": 111285,
            "surname": "Waqa",
            "full_name": "Sisa Waqa",
            "short_name": "S. Waqa",
            "other_names": "Sisa",
            "jumper_number": 2,
            "position_code": "WING1",
            "position_order": 2,
            "position_description": "Wing",
            "is_captain": false,
            "is_interchange": false
        },
        {
            "id": 109861,
            "surname": "Croker",
            "full_name": "Jarrod Croker",
            "short_name": "J. Croker",
            "other_names": "Jarrod",
            "jumper_number": 3,
            "position_code": "CEN1",
            "position_order": 3,
            "position_description": "Centre",
            "is_captain": true,
            "is_interchange": false
        },
        {
            "id": 112814,
            "surname": "Lee",
            "full_name": "Edrick Lee",
            "short_name": "E. Lee",
            "other_names": "Edrick",
            "jumper_number": 5,
            "position_code": "CEN2",
            "position_order": 4,
            "position_description": "Centre",
            "is_captain": false,
            "is_interchange": false
        }
    ]
}

同样，第二个是 stats.json ，具有以下 json 代码

{
    "player_stats": [
        {
            "id": 112814,
            "matches": "123",
            "tries": "11"
        },
        {
            "id": 111285,
            "matches": "234",
            "tries": "22"
        },
        {
            "id": 109861,
            "matches": "345",
            "tries": "33"
        },
        {
            "id": 109509,
            "matches": "456",
            "tries": "44"
        },
        {
            "id": 109510,
            "matches": "567",
            "tries": "55"
        }
    ]
}

我想做的是解析 JSON 文件并使用表格显示其数据，使用 short_name、matches 和 tries 领域。如果玩家没有统计数据，则忽略它们并仅打印有统计数据的玩家。

如何打印如下所示的内容:如果玩家上的 id 与统计数据上的 id 匹配，那么我必须打印如下统计数据。甚至无法启动。任何提示或答案都会有很大帮助。

Answer 1

抱歉，无法看到您的图片，因为它被屏蔽了。

你能做一个嵌套循环吗？ (可能是一种更奇特的减少方法，但这似乎有效)

循环遍历玩家并使用过滤功能添加他们的统计数据。

然后通过过滤功能再次过滤掉没有统计数据的玩家。

然后执行嵌套循环来创建表。

运行下面的代码片段

const players = {players: [{
    "id": 109191123,
    "surname": "Farah",
    "full_name": "Robbie Farah",
    "short_name": "R. Farah",
    "other_names": "Robert",
    "jumper_number": 9,
    "position_code": "WING1",
    "position_order": 2,
    "position_description": "Wing",
    "is_captain": false,
    "is_interchange": false
  },
  {
    "id": 109861,
    "surname": "Croker",
    "full_name": "Jarrod Croker",
    "short_name": "J. Croker",
    "other_names": "Jarrod",
    "jumper_number": 3,
    "position_code": "CEN1",
    "position_order": 3,
    "position_description": "Centre",
    "is_captain": true,
    "is_interchange": false
  },
  {
    "id": 112814,
    "surname": "Lee",
    "full_name": "Edrick Lee",
    "short_name": "E. Lee",
    "other_names": "Edrick",
    "jumper_number": 5,
    "position_code": "CEN2",
    "position_order": 4,
    "position_description": "Centre",
    "is_captain": false,
    "is_interchange": false
  }
]}

const stats = {player_stats : [{
    "id": 112814,
    "matches": "123",
    "tries": "11"
  },
  {
    "id": 111285,
    "matches": "234",
    "tries": "22"
  },
  {
    "id": 109861,
    "matches": "345",
    "tries": "33"
  },
  {
    "id": 109509,
    "matches": "456",
    "tries": "44"
  },
  {
    "id": 109510,
    "matches": "567",
    "tries": "55"
  }
]}

$(document).ready(function() {
  $('.apple').append(` <table class="table">
      <thead>
        <tr>
          <th scope="col">Short Name</th>
          <th scope="col">Matches</th>
          <th scope="col">Tries</th>
        </tr>
      </thead>
      <tbody id="mybody">

      </tbody>
    </table>`);
  let myhtml = '';
  players.players.forEach(function(element) {
    element.player_stats = stats.player_stats.filter(x => x.id === element.id);
  });
  players.players.filter(x => x.player_stats.length).forEach(function(element) {
    element.player_stats.forEach(function(stat) {
      myhtml += `<tr>
            	<td>${element.short_name}</td>
              <td>${stat.matches}</td>
               <td>${stat.tries}</td>
             </tr>`
    });
  });
  $('#mybody').append(myhtml);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="apple"></div>