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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.