щелкните элемент списка, чтобы получить соответствующую информацию из файла JSON, чтобы обновить HTML-код правильными данными - PullRequest
Новая
       3

щелкните элемент списка, чтобы получить соответствующую информацию из файла JSON, чтобы обновить HTML-код правильными данными

0 голосов
/ 03 февраля 2019

Я хочу обновить текстовое содержимое на html-странице соответствующей информацией из файла JSON.

В настоящее время я могу заполнить раскрывающееся меню с именем игрока изфайл 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
            }
        ]
    }
]

}

1 Ответ

0 голосов
/ 04 февраля 2019

Вот пример кода, который вы можете вставить в элемент body html-файла.Для простоты в нем всего два игрока.

В HTML используется элемент select, каждый из которых option потомков имеет полное имя игрока в качестве видимого text и идентификатор игрока этого игрока в качестве невидимого value.Выбор опции запускает функцию, которая:
1) использует playerId для поиска соответствующих данных игрока в глобальном объекте players,
2) сохраняет эти данные в глобальном объекте selectedPlayer и
3) демонстрирует, как извлекать конкретные значения из выбранного 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...