javascript - 从多个 $.get 调用创建一个数组

Question

我正在尝试填充将用于传递到 Google Visualizations API 的 javascript 数组

我有多个包含简单股票数据的表，数组的每个元素都将保存一个表中的一些信息。到目前为止，这就是我填充数组的方式

function drawMapOfPortfolio(symbols, chart_div) {
var gdata = new google.visualization.DataTable();
gdata.addColumn('string', 'Symbol');
gdata.addColumn('string', 'Sector');
gdata.addColumn('number', 'Volume');
gdata.addColumn('number', 'Percent Change');
gdata.addRow(["Portfolio", null, 0, 0]);
gdata.addRow(["Information Technology", "Portfolio", 0, 0]);
gdata.addRow(["Financials", "Portfolio", 0, 0]);
gdata.addRow(["Consumer Staples", "Portfolio", 0, 0]);
gdata.addRow(["Consumer Discretionary", "Portfolio", 0, 0]);

//setup arrays to store the XHR objects to resolve
//and to store the data returned from the server for each request
var jqXHRs = [],
data = [];

//your loop will run faster if you cache the length of the array
for(i=0, len = symbols.length; i < len; i++) {
    //create an IIFE to save the state of the `i` variable for each callback function
    //IIFE = Immediately-Invoked-Function-Expression
    (function (i) {
        var symbol = symbols[i];
        jqXHRs[i] = $.ajax({
            url: "mysql_api.php", 
            type: "GET",
            data: { sqlquery: "SELECT volume, day_change_percent, sector FROM " + symbol + " LEFT JOIN sector USING(symbol) ORDER BY unixTS DESC LIMIT 1" },
            dataType: "json",
            success: function(serverResponse) {
                var treemapData = [symbol, serverResponse[0]["sector"], parseFloat(serverResponse[0]["volume"]), parseFloat(serverResponse[0]["day_change_percent"])];
                data[i] = treemapData;
            }
        });
    })(i);
}

//when all the XHR objects resolve, add their server responses to your `gdata` object
$.when(jqXHRs).then(function () {
    gdata.addRows(data);
    alert(data);
    var chart = new google.visualization.TreeMap(document.getElementById(chart_div));
    chart.draw(gdata, {
    minColor: '#f00',
    midColor: '#ddd',
    maxColor: '#0d0',
    headerHeight: 15,
    fontColor: 'black',
    showScale: true
    });
});

但为了这样做，我必须将 async 设置为 false。通过将 async 设置为 true，发送查询并且 google visualizations 尝试在填充数组之前绘制图表。有什么办法解决这个问题吗？我想我要找的是

使用异步 $.ajax 调用来填充数组，然后在调用 Google Visualization 的绘制函数之前等待所有内容同步。

更新:更改了 javascript 代码，但 $.when 中的“数据”数组为空

Answer 1

//setup arrays to store the XHR objects to resolve
//and to store the data returned from the server for each request
var jqXHRs = [],
    data   = [];

//your loop will run faster if you cache the length of the array
for(i=0, len = symbols.length; i < len; i++) {

    //create an IIFE to save the state of the `i` variable for each callback function
    //IIFE = Immediately-Invoked-Function-Expression
    (function (i) {
        var symbol = symbols[i];
        jqXHRs[i] = $.ajax({
            url      : "mysql_api.php", 
            type     : "GET",
            data     : { sqlquery: "SELECT volume, day_change_percent, sector FROM " + symbol + " LEFT JOIN sector USING(symbol) ORDER BY unixTS DESC LIMIT 1" },
            dataType : "json",
            success  : function(serverResponse) {
                var treemapData = [symbol, serverResponse[0]["sector"], parseFloat(serverResponse[0]["volume"]), parseFloat(serverResponse[0]["day_change_percent"])];

                //add the server response from this request to the same index as the XHR object for this request
                data[i] = treemapData;
            }
        });
    })(i);
}

//when all the XHR objects resolve, add their server responses to your `gdata` object
$.when(jqXHRs).then(function () {
    for (var i = 0, len = data.length; i < len; i++) {
        gdata.addRow(data[i]);
    }
});

严厉警告

您正在将完整的 SQL 查询传递到您的服务器端脚本中。这是非常不安全的，因为我可以使用我的开发人员控制台粘贴我想要运行的任何 SQL。例如，我可以非常轻松地删除您的整个数据库...