I'm looking to update the text content on the html page with the relevant information from the JSON file.
At the moment, I'm able to populate the drop down menu, with players name from the JSON file. But I'm not sure how to target a list item, when it has been clicked on and populate the players stats with the correct data from the JSON file.
Below is my code, any help or guidance would be great as I'm stuck for the past couple of days now.... Thanks in advance!
Here is the HTML
<body>
<section class="player-card">
<!-- player-dropDown -->
<div class="player-dropDown">
<ul class="player-dropDown__disable">
<li id="disable"> Select a player... </li>
<ul class="player-dropDown__select">
<li class="select"> Toby Alderweireld </li>
</ul>
</ul>
</div>
<!-- player-img -->
<div class="player-img">
<img src="./img/toby.png">
</div>
<!-- player-stats -->
<div class="player-stats">
<h1 class="player-stats__name">Toby Alderweireld</h1>
<h2 class="player-stats__position">Defender</h2>
<div class="player-stats__badge">
<div id="player-stats__badge-icon"></div>
</div>
<div class="player-stats__container">
<div class="player-stats__box player-stats__box-space clear">
<p class="player-stats__box-name"> Appearances </p>
<p id ="appearances" class="player-stats__box-value"> 80 </p>
</div>
<div class="player-stats__box player-stats__box-space clear">
<p class="player-stats__box-name"> Goals </p>
<p id="goals" class="player-stats__box-value"> 5 </p>
</div>
<div class="player-stats__box player-stats__box-space clear">
<p class="player-stats__box-name"> Assists </p>
<p id="assists" class="player-stats__box-value"> 2 </p>
</div>
<div class="player-stats__box player-stats__box-space clear">
<p class="player-stats__box-name"> Goals per match </p>
<p id="goals-per-match" class="player-stats__box-value"> 0.06 </p>
</div>
<div class="player-stats__box clear">
<p class="player-stats__box-name"> Passes per minute </p>
<p id="passes-per-min" class="player-stats__box-value"> 0.26 </p>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="js/index.js"></script>
Here is my JS
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Parse JSON file from string to object
var response, players;
response = JSON.parse(xhttp.responseText);
players = response.players;
// toggle menu
function toggleMenu() {
var DropDownBtn, DropDownMenu;
DropDownBtn = document.getElementById('disable');
DropDownMenu = document.querySelector('.player-dropDown__select');
DropDownBtn.onclick = function() {
DropDownMenu.classList.toggle('show');
console.log('menu clicked');
}
}
// dropDownNameOutput
function menuNameOutput() {
var menuNameOutput;
menuNameOutput = '';
// loop through JSON file
for ( var i = 0; i < players.length; i++ ) {
var playerID,
playerFirstName,
playerLastName,
appearance,
goals,
assists,
goalsPerMatch,
goalsPerMatchDecimal,
passesPerMin,
fwdPasses,
bwdPasses,
minsPlayed,
passesPerMinDecimal;
// from the JSON file log the players stats
playerID = players[i].player.id;
playerFirstName = players[i].player.name.first;
playerLastName = players[i].player.name.last;
appearance = players[i].stats[6].value;
goals = players[i].stats[0].value;
assists = players[i].stats[5].value;
fwdPasses = players[i].stats[4].value;
bwdPasses = players[i].stats[8].value;
minsPlayed = players[i].stats[7].value;
goalsPerMatch = goals / appearance;
goalsPerMatchDecimal = goalsPerMatch.toFixed(2);
passesPerMin = (fwdPasses + bwdPasses) / minsPlayed;
passesPerMinDecimal = passesPerMin.toFixed(2);
// populate the drop down menu with players names & ID
menuNameOutput += '<li id="' + playerID + '"' + ' ' + 'class="select">' + playerFirstName + ' ' + playerLastName + '</li>';
};
// output the players name & ID to the menu (HTML)
document.querySelector('.player-dropDown__select').innerHTML = menuNameOutput;
};
toggleMenu();
menuNameOutput();
}
};
xhttp.open("GET", "JSON/player-stats.json", true);
xhttp.send();
Here is the JSON
{
"players":[
{
"player":{
"info":{
"position":"D",
"shirtNum":4,
"positionInfo":"Centre/Right Central Defender"
},
"nationalTeam":{
"isoCode":"BE",
"country":"Belgium",
"demonym":"Belgian"
},
"age":"27 years 139 days",
"name":{
"first":"Toby",
"last":"Alderweireld"
},
"id":4916,
"currentTeam":{
"name":"Tottenham Hotspur",
"teamType":"FIRST",
"shortName":"Spurs",
"id":21
}
},
"stats":[
{
"name":"goals",
"value":5
},
{
"name":"losses",
"value":20
},
{
"name":"wins",
"value":48
},
{
"name":"draws",
"value":23
},
{
"name":"fwd_pass",
"value":1533
},
{
"name":"goal_assist",
"value":2
},
{
"name":"appearances",
"value":80
},
{
"name":"mins_played",
"value":6953
},
{
"name":"backward_pass",
"value":308
}
]
},
{
"player":{
"info":{
"position":"M",
"shirtNum":42,
"positionInfo":"Centre Defensive Midfielder"
},
"nationalTeam":{
"isoCode":"CI",
"country":"Cote D'Ivoire",
"demonym":"Ivorian"
},
"age":"33 years 67 days",
"name":{
"first":"Yaya",
"last":"Touré"
},
"id":4148,
"currentTeam":{
"name":"Manchester City",
"teamType":"FIRST",
"shortName":"Man City",
"id":11
}
},
"stats":[
{
"name":"goals",
"value":65
},
{
"name":"losses",
"value":49
},
{
"name":"wins",
"value":149
},
{
"name":"draws",
"value":35
},
{
"name":"fwd_pass",
"value":4491
},
{
"name":"goal_assist",
"value":35
},
{
"name":"appearances",
"value":232
},
{
"name":"mins_played",
"value":18919
},
{
"name":"backward_pass",
"value":1995
}
]
},
{
"player":{
"info":{
"position":"F",
"shirtNum":10,
"positionInfo":"Left/Centre/Right Second Striker"
},
"nationalTeam":{
"isoCode":"GB-ENG",
"country":"England",
"demonym":"English"
},
"age":"30 years 269 days",
"name":{
"first":"Wayne",
"last":"Rooney"
},
"id":2064,
"currentTeam":{
"name":"Manchester United",
"teamType":"FIRST",
"shortName":"Man Utd",
"id":12
}
},
"stats":[
{
"name":"goals",
"value":201
},
{
"name":"losses",
"value":91
},
{
"name":"wins",
"value":280
},
{
"name":"draws",
"value":90
},
{
"name":"fwd_pass",
"value":1795
},
{
"name":"goal_assist",
"value":84
},
{
"name":"appearances",
"value":461
},
{
"name":"mins_played",
"value":27056
},
{
"name":"backward_pass",
"value":1928
}
]
},
{
"player":{
"info":{
"position":"D",
"shirtNum":4,
"positionInfo":"Centre Central Defender"
},
"nationalTeam":{
"isoCode":"DE",
"country":"Germany",
"demonym":"German"
},
"age":"31 years 294 days",
"name":{
"first":"Per",
"last":"Mertesacker"
},
"id":4246,
"currentTeam":{
"name":"Arsenal",
"teamType":"FIRST",
"shortName":"Arsenal",
"id":1
}
},
"stats":[
{
"name":"goals",
"value":8
},
{
"name":"losses",
"value":45
},
{
"name":"wins",
"value":117
},
{
"name":"draws",
"value":41
},
{
"name":"fwd_pass",
"value":4257
},
{
"name":"goal_assist",
"value":0
},
{
"name":"appearances",
"value":187
},
{
"name":"mins_played",
"value":16531
},
{
"name":"backward_pass",
"value":535
}
]
},
{
"player":{
"info":{
"position":"M",
"shirtNum":26,
"positionInfo":"Left/Right Winger"
},
"nationalTeam":{
"isoCode":"DZ",
"country":"Algeria",
"demonym":"Algerian"
},
"age":"25 years 149 days",
"name":{
"first":"Riyad",
"last":"Mahrez"
},
"id":8983,
"currentTeam":{
"name":"Leicester City",
"teamType":"FIRST",
"shortName":"Leicester",
"id":26
}
},
"stats":[
{
"name":"goals",
"value":22
},
{
"name":"losses",
"value":23
},
{
"name":"wins",
"value":35
},
{
"name":"draws",
"value":21
},
{
"name":"fwd_pass",
"value":687
},
{
"name":"goal_assist",
"value":14
},
{
"name":"appearances",
"value":71
},
{
"name":"mins_played",
"value":5368
},
{
"name":"backward_pass",
"value":323
}
]
}
]
}