我在寻找更新与从JSON文件中的相关信息的HTML网页上的文字内容。
此刻，我能够填充下拉菜单，从JSON文件球员名字。但我不知道如何定位一个列表项，当被点击它，并填充玩家从JSON文件正确的数据统计。
下面是我的代码，任何帮助或指导将是伟大的，因为我坚持过去几个现在的天....在此先感谢！
下面是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>
这里是我的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();
这里是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
}
]
}
]
}
下面是一些示例代码，您可以粘贴到HTML文件的主体元素。它包含了只有两名球员的简单性。
该HTML采用select元素，它的每个option孩子有一个球员的全名作为其可见text和玩家的playerId作为其隐形value。选择一个选项触发功能：
1）采用playerId找到全球players对象对应的玩家数据，
2）存储在全球selectedPlayer对象数据，并
3）demonatrates如何从selectedPlayer检索特定的值。
（检索值 - 包括玩家对象，使用播放器的playerId作为自己的钥匙 - 由JSON的不包含数组，只有对象的事实做了一个简单一点。）
<select id="dropdown" onchange="respondToSelection()">
<option value="0000">Some Player</option>
<option value="4246">Per Mertesacker</option>
</select>
<script>
// Global identifiers
const
dropdown = document.querySelector("#dropdown"),
opts = dropdown.options,
jsonString = getJsonString(),
players = JSON.parse(jsonString); // Javascript object containing all players' info
let selectedPlayer; // Object will hold info for whichever player is selected
function respondToSelection(){
// Handles user input by populating the selectedPlayer object with the corresponding data
const
index = dropdown.selectedIndex,
selected = opts[index],
text = selected.text,
playerId = selected.value;
console.log(`text from dropdown: ${text}`);
console.log(`playerId from dropdown: ${playerId}`);
selectedPlayer = players[playerId]; // Stores the selected player's info in the selectedPlayer object
// Now we can get any property within the selected player by using dot notation like:
const
country = selectedPlayer.player.nationalTeam.country,
goals = selectedPlayer.stats.goals;
console.log(`country: ${country}`);
console.log(`goals: ${goals}`);
}
function getJsonString(){
return `{
"4246" : {
"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": {
"goals" : 8,
"losses" : 45,
"wins" : 117,
"draws" : 41,
"fwd_pass" : 4257,
"goal_assist" : 0,
"appearances" : 187,
"mins_played" : 16531,
"backward_pass" : 535
}
},
"0000" : {
"player": {
"info": { "position" : "D", "shirtNum" : 0, "positionInfo" : "Some Position" },
"nationalTeam": { "isoCode" : "DE", "country" : "Germany", "demonym" : "German" },
"age": "29 years 29 days",
"name": { "first" : "Some", "last" : "Player" },
"id": "0000",
"currentTeam": { "name" : "Arsenal", "teamType" : "FIRST", "shortName" : "Arsenal", "id" : 1 }
},
"stats": {
"goals" : 1,
"losses" : 1,
"wins" : 1,
"draws" : 1,
"fwd_pass" : 57,
"goal_assist" : 0,
"appearances" : 18,
"mins_played" : 531,
"backward_pass" : 35
}
}
}`
}
</script>