Javascript 从多个$.get调用创建数组

我试图填充一个javascript数组，该数组将用于传递到Google Visualizations API中

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

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将在填充数组之前尝试绘制图表。有什么办法可以解决这个问题吗？我想我要找的是

使用async$.ajax调用填充数组，但在调用Google Visualization的draw函数之前，请等待所有内容同步

更新：已更改javascript代码，但数据数组在$内为空。当

//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。例如，我可以很容易地删除您的整个数据库…

这是一个最常见的非平凡JavaScript问题的变体。你很快就会得到一个很好的答案，我预测：-为什么要在ajax中公开sql语句，而不仅仅是一次向php发送符号并进行所有数组编译there@charlietfl哇，我刚刚注意到-这是一件非常危险的事情…@Pointy除了是一件愚蠢的事情之外…在我看来，在一个callAh中编译会容易得多，即使我将该帐户上的权限设置为仅具有SELECT功能？由于$.ajax调用仍然使用async:false，这是否意味着我仍然必须等待所有查询单独发送？@JCWong我忘记从代码中删除async:false。使用上述方法是没有必要的，而且所有这些都可以在用户不知道的情况下发生。到目前为止，我认为一切都是有意义的，但由于某些原因，当GViz尝试绘制时，数据数组仍然没有填充。我将绘图代码移到了$.when.then部分。根据文档，这应该只在jqXHRR完成解析后执行，并且因为无论何时解析jqXHR，success函数都会填充“data”，所以数据应该是populated@JCWong确保不要多次使用同一个变量名。我在AJAX回调函数中将原始数据变量更改为serverResponse，这样全局数据变量就不会出错。事后看来我太傻了。。。