循环多个HTTP请求并组合结果

我现在知道如何从外部网页加载表的列了。

现在我想扩展一下

从几个页面获取表格数据(按球员位置排名)。
合并成一个主表

这是脚本当前获取的URL (http:…fantasysports.yahoo.com…pos=QB)。列是各个位置的球队名称和球队排名。

我想让它迭代其他位置(即WR, RB, TE)。只需将URL的最后两个字母更改为相应的值即可完成此操作。然后，我想将所有这些数据放在一个数组中，其中第一列是球队名称，第二列是QB位置的排名#，第三列是WR位置的排名#，等等。

我的计划是将GM_xmlhttpRequest放在for循环中，该循环遍历不同的位置名称。
我的代码能够为位置显示单独的表，但由于某种原因，它们不是按顺序排列的。

我遇到的另一个问题是变量范围。目前newStatTable是在parseResponse函数内定义的，但我无法从函数外部访问它。我试着从var newStatTable中删除var，使其成为全局的，但它不起作用。

这里是一个示例输出数组，我正在寻找(注意:我只是随机选择这些排名):

TeamName                QB   WR   TE    and so on...
---                     --   --   --
Jacksonville Jaguars    1    6    28
Sanfrancisco 49ers      4    2    32
Seattle Seahawks        31   5    10

这是我的尝试。

// ==UserScript==
// @name        _Grab stuff of a *static*, third-party web site.
// @include  http://football.fantasysports.yahoo.com/*
// @include  https://football.fantasysports.yahoo.com/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       GM_xmlhttpRequest
// ==/UserScript==
pos = ["QB", "WR", "RB", "TE", "K", "DEF"];
for (x in pos) {
    GM_xmlhttpRequest ( {
        method:     "GET",
        url:        "http://football.fantasysports.yahoo.com/f1/326198/pointsagainst?pos=" + pos[x],
        onload:     parseResponse,
        onerror:    function (e) { console.error ('**** error ', e); },
        onabort:    function (e) { console.error ('**** abort ', e); },
        ontimeout:  function (e) { console.error ('**** timeout ', e); }
    } );
}
function parseResponse (response) {
    var parser  = new DOMParser ();
    var ajaxDoc         = parser.parseFromString (response.responseText, "text/html");
    var statRows        = ajaxDoc.querySelectorAll ("#statTable0 > tbody > tr");
    var newStatTable    = $(statRows).map ( function () {
        var tblRow      = $(this);
        var teamRank    = parseInt (tblRow.find (".rank-indicator").text().trim(), 10);
        var teamName    = tblRow.find ("td:eq(1)").text().trim().split(" vs")[0];
        return [ [teamName, teamRank] ]; //Return Teamname, Rank #
    } ).get ();
    console.log (newStatTable);
}

AJAX，根据定义是异步的。这意味着返回的数据将以任意顺序返回，并且数据在回调函数之外不可用，除非您显式地将其复制出来。

因此，对于多页面mashup，必须有一些方法根据需要对数据进行整理。(在你的情况下，你可以核对球队的名字。)

一般的方法是:

Associative Array

在每个AJAX调用中传递上下文。
使用该上下文来控制AJAX回调函数如何解析数据并将其整理到整个数组中。
监视AJAX调用的状态，只有当它们全部完成时才进行最后的处理。

在userscript中是这样的:

// ==UserScript==
// @name        _Mash up tables from several *static*, third-party, web pages.
// @match       *://football.fantasysports.yahoo.com/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       GM_xmlhttpRequest
// ==/UserScript==
const playerPositions   = ["QB", "WR", "RB", "TE", "K", "DEF"];
const numPositions      = playerPositions.length;
const baseURL           = "http://football.fantasysports.yahoo.com/f1/326198/pointsagainst?pos=";
var rankingsTable       = {};  //-- This will be filled by the AJAX parser.
var numPagesFetched     = 0;
for (var J in playerPositions) {
    GM_xmlhttpRequest ( {
        method:     "GET",
        url:        baseURL + playerPositions[J],
        context:    playerPositions[J],
        onload:     parseResponse,
        onerror:    function (e) { console.error ('**** error ', e); },
        onabort:    function (e) { console.error ('**** abort ', e); },
        ontimeout:  function (e) { console.error ('**** timeout ', e); }
    } );
}
function parseResponse (response) {
    var playerPosition  = response.context;
    var parser          = new DOMParser ();
    var ajaxDoc         = parser.parseFromString (response.responseText, "text/html");
    var statRows        = ajaxDoc.querySelectorAll ("#statTable0 > tbody > tr");
    var newStatTable    = $(statRows).map ( function () {
        var tblRow          = $(this);
        var teamRank        = parseInt (tblRow.find (".rank-indicator").text().trim(), 10);
        var teamName        = tblRow.find ("td:eq(1)").text().trim().split(" vs")[0];
        return [ [teamName, teamRank] ];
    } ).get ();
    numPagesFetched++;
    console.log ('Fetched page ' + numPagesFetched + ' of ' + numPositions + '.');
    /*--- Now loop over the fetched rows and collate them into the master table, depending
          on playerPosition.
    */
    var columnIdx       = playerPositions.indexOf (playerPosition);
    for (var K in newStatTable) {
        var teamName        = newStatTable[K][0];
        var teamRank        = newStatTable[K][1];
        var teamStats       = rankingsTable[teamName]  ||  new Array (numPositions);
        teamStats[columnIdx]    = teamRank;
        rankingsTable[teamName] = teamStats;
    }
    if (numPagesFetched === numPositions) {
        displayFinalResult ();
    }
}
function displayFinalResult () {
    var sortedTeamNames = Object.keys (rankingsTable).sort ( function (zA, zB) {
        return zA.localeCompare (zB);
    } );
    const namePadStr    = new Array (25).join (' ');
    console.log (
        'Team                       Ranks QB, WR, RB, TE, K, DEFn' +
        '------------------------   ------------------------------'
    );
    for (var J in sortedTeamNames) {
        var teamName    = sortedTeamNames[J];
        if (rankingsTable.hasOwnProperty (teamName) ) {
            console.log (
                (teamName + namePadStr).slice (0, 24) + '  ', rankingsTable[teamName]
            );
        }
    }
}

我们将从你的FF奖金中分得一大笔，对吗?div;)

相关内容

最新更新

热门标签：