Создание массива из нескольких вызовов $ .get - PullRequest
Новая
       13

Создание массива из нескольких вызовов $ .get

2 голосов
/ 27 марта 2012

Я пытаюсь заполнить массив javascript, который будет использоваться для передачи в API визуализаций Google.

У меня есть несколько таблиц, содержащих простые данные о запасах, и каждый элемент массива будет содержать некоторую часть информации изодин столДо сих пор я так заполнял массив 

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.

Обновлено: изменен код JavaScriptно массив "data" внутри $ .when

пуст

1 Ответ

1 голос
/ 27 марта 2012 
//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, который я хочу запустить.Например, я могу очень легко удалить всю вашу базу данных ...

...