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

Question

As I am new to JS and JSON, I am having tough time to find a proper solution that works for me. I have two different json files. First one: players.json with following data:

{
    "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
        }
    ]
}

and similarly, second one is stats.json having following json code

{
    "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"
        }
    ]
}

What I am trying to do is parse the JSON files and display their data using a table, using the short_name , matches , and tries fields. If a player does not have stats then just ignore them and print only those with stats.

How can I print something like below: If id on players matches with id on stats, then I have to print stats like below. Couldn't even start. Any hint or answer would be great help.

Answer 1

sorry couldn't see your image as it was blocked but.

can you just do a nested loop? (probably a fancier way with reduce but this seems to work)

loop through the players and add in their stats with the filter function.

then filter out players that do not have stats again with filter function.

then do a nested loop to create the table.

run code snippet below

 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>