Question

所以我试图得到2个数组player_name和player_mmr中的名字和分数。在fillplayer函数中调用player_name [i]和player_mmr [i]都只返回undefined。我觉得我在这里遗漏了一些明显的东西但是因为我的生活无法理解。我猜这与使用push有关。

var btnmatch = document.querySelector('#get-data');
var btnchat = document.querySelector('#get-chat');
var matchid = document.querySelector('#match-id');
var tableheaders = [
    'Hero',
    'level',
    'Name',
    'Kills',
    'Deaths',
    'assists',
    'GPM',
    'XPM',
    'HD',
    'TD'
];

var dataheaders = [
    "hero_id",
    'level',
    'personaname',
    'kills',
    'deaths',
    'assists',
    'gold_per_min',
    'xp_per_min',   
    'hero_damage',
    'tower_damage'
];

var playerids = [
    'player1',
    'player2',
    'player3',
    'player4',
    'player5',
    'player6',
    'player7',
    'player8',
    'player9',
    'player10'
];

var playeraccounts = [];
var requests = [];
var playersdata = [];
var player_name = [];
var player_mmr = [];

btnmatch.addEventListener('click', function(){
        GetMatchData(matchid.value);

});

btnchat.addEventListener('click', function(){
        for  (i in playeraccounts ){
            requests[i] = new GetPlayerData(playeraccounts[i]);
        }
        console.log(player_name);
        console.log(typeof player_name);
        console.log(player_mmr);
        fillplayer();

});





function GetPlayerData(accountid)
{
    var Url = 'https://api.opendota.com/api/players/' + accountid;


    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", Url, true );
    xmlHttp.onreadystatechange = function ProcessRequestPlayer() 
    {
        if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) 
        {
            if ( xmlHttp.responseText == "Not found" ) 
            {
                console.log("not found");
            }
            else
            {
                var info = xmlHttp.responseText;

                var playerjson = JSON.parse(info);

                player_name.push(playerjson.profile.personaname);
                if(playerjson.solo_competitive_rank === null){
                    player_mmr.push(playerjson.mmr_estimate.estimate);
                } else {
                        player_mmr.push(playerjson.solo_competitive_rank);
                } 


            }                    
        }
    };
    xmlHttp.send();


}



function GetMatchData(id)
{

    var Url = 'https://api.opendota.com/api/matches/' + id;


    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", Url, true );
    xmlHttp.onreadystatechange = function ProcessRequestMatch() {
        if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) 
        {
            if ( xmlHttp.responseText == "Not found" ) 
            {
                console.log("not found")
            }
            else
            {
                var info = xmlHttp.responseText;

                var testjson = JSON.parse(info);

                createTable2(testjson);
                getaccountids(testjson);

            }                    
        }
    };    
    xmlHttp.send();

}


function getaccountids(json) {
    Object.keys(json.players).forEach(function(i){
        playeraccounts.push(json.players[i].account_id);
    });
}

function fillplayer(){
        console.log(player_name);
        console.log(player_mmr);
    for (var i = 0; i < playerids.length; i++){
        console.log(player_name[i]);

        document.getElementById(playerids[i]).getElementsByClassName('name')[0].innerHTML = player_name + ': ';
        document.getElementById(playerids[i]).getElementsByClassName('mmr')[0].innerHTML = player_mmr[i];
    }

}




function createTable2(json) {
    // Create table.

    var table = "<table class='game-table'>";
    table += "<thead>";
    table += "<tr>";
    for (var i = 0; i < 10; i++){
        table += "<th>" + tableheaders[i] + "</th>";

    }
    table += "</tr>";
    table += "</thead>";

    table += "<tbody>";

    for (var i = 0; i < 5; i++){

        table += "<tr class='radiant'>";
        for (var x = 0; x < dataheaders.length; x++) {

                table += "<td>" + json.players[i][dataheaders[x]] + "</td>";


        }
        table += "</tr>";
    }

    for (var i = 5; i < 10; i++){
        table += "<tr class='dire'>";
        for (var x = 0; x < dataheaders.length; x++) {
                table += "<td>" + json.players[i][dataheaders[x]] + "</td>";

        }
        table += "</tr>";
    }
    table += "</tbody>";
    table += "</table>";
    var sectie = document.getElementById('table');
    if (json.radiant_win == false){
        var winnertekst = document.createTextNode('Dire Victory');
    } else {
        var winnertekst = document.createTextNode('Radiant Victory');
    }

    console.log(table);
    console.log(typeof table);
    console.log(sectie);
    document.getElementsByClassName('winnersect')[0].appendChild(winnertekst);
    sectie.innerHTML = table;
}

Answer 1

正如marekful所说，您可以使用诺言，也可以看一下Async Functions 如果您未将IE作为浏览器定位，则可以使用 Fetch API 而不是XMLHttpRequest并具有更整洁的结构。这两个都返回您可以消费的承诺。另一来源显示了如何组合提取和异步功能 JavaScript Fetch API and using Async/Await 。

如何使用一系列异步请求的结果填充数组

1 个答案: