Многомерные массивы и getJSON в jQuery

Question

Я отправил запрос getJSON контроллеру в моем приложении, этот контроллер возвращает действительный JSON с двумя «приложениями». Я знаю это точно, как если бы я переместил оператор оповещения в каждую функцию jQuery, это даст мне ожидаемый результат.

Я пытаюсь сохранить эти данные в многомерном массиве для последующего использования с помощью управления меню extJS.

Код:

Ext.onReady(function() {
    var applicationList = [];
    jQuery.getJSON('index.php/applications', function(data) {
        jQuery.each(data.applications, function (i, app) {
            applicationList[i] = [];
            applicationList[i]['text'] = app['title'];
            applicationList[i]['id'] = app['slug'];
        });
    });
    alert(applicationList[0]['text']);

    var applicationMenu = Ext.menu.Menu({
        items: applicationList
    });
});

JSON-ответ:

{"applications":[{"slug":"test","title":"Test"},{"slug":"hardware","title":"Hardware"}]}

Ожидаемый результат:

Test

Фактический результат (от Firebug):

applicationList [0] не определен

Если я заменим alert() выше, со следующим кодом, я получу одно окно с текстом «удалить»:

for (p in applicationList) {
    alert(p);
}

Теперь я думаю, что запрос JSON не завершается вовремя для alert(), поэтому я буду использовать именованную функцию обратного вызова, чтобы убедиться, что запрос завершен:

var data;
jQuery.getJSON('index.php/applications', get_applications(data));

function get_applications(data) {
    jQuery.each(data.applications, function (i, app) {
        applicationList[i] = [];
        applicationList[i]['text'] = app['title'];
        applicationList[i]['id'] = app['slug'];
    });
};

Но теперь Firebug говорит мне, что data is undefined ...

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

Answer 1

Это должно сделать это:

Ext.onReady(function() {
    var applicationList = [];
    var applicationMenu;

    jQuery.getJSON('index.php/applications', function(data) {
        jQuery.each(data.applications, function (i, app) {
                applicationList[i] = [];
                applicationList[i]['text'] = app['title'];
                applicationList[i]['id'] = app['slug'];
        });

        applicationMenu = Ext.menu.Menu({
            items: applicationList
        });
    });
});

Ваше мышление верно; причина, по которой он не работает, заключается в том, что AJAX является асинхронным процессом, и когда вы запускаете функцию getJSON, javascript продолжает работать. Ваше решение не работает, потому что присвоение ему именованного обратного вызова не меняет того факта, что оно не будет запущено, пока вы не попытаетесь инициализировать меню. Все, что я делаю, это перемещает код инициализации Меню ВНУТРИ обратного вызова, как тогда, так и только тогда, у вас будет доступ к заполненному списку приложений.

Answer 2

Вы правы, вы должны использовать переменную applicationList только после завершения обратного вызова getJSON.

Вы должны вызывать Ext.menu.Menu () внутри вашего обратного вызова getJSON после jQuery.each ().

Answer 3

Решение Паоло Бергантино должно работать, но вы также можете сделать это по-своему, используя именованную функцию обратного вызова - вы только что допустили несколько небольших ошибок в своем коде:

1. данные не должны быть объявлены как переменные - данные в "функции get_applications (data)" просто означают, что .getJSON возвращает
2. Функция обратного вызова в .getJSON должна быть просто именем функции без (data)

Вот исправленный код:

jQuery.getJSON('index.php/applications', get_applications);

function get_applications(data) {
        jQuery.each(data.applications, function (i, app) {
                applicationList[i] = [];
                applicationList[i]['text'] = app['title'];
                applicationList[i]['id'] = app['slug'];
        });
};

Answer 4

$.getJSON("getq2.php",{yr:year,typ:type},function(data) {

        var items1 = new Array();

            var j=0;
            for ( var i in data ) {
                var items = new Array();

                items.push(data[i][0],Number(data[i][1]));
                items1[j++] = items;
            }
                console.log(items1);
            var plot1 = jQuery.jqplot('chartContainer', [items1],
            {
                seriesDefaults: {

                    // Make this a pie chart.
                    renderer: jQuery.jqplot.PieRenderer,
                    rendererOptions: {
                    startAngle: 180,
                      sliceMargin: 2,
                    dataLabelThreshold: 2,

                        // Put data labels on the pie slices.
                        // By default, labels show the percentage of the slice.
                        showDataLabels: true,

                    }
                },
                grid: {borderWidth:0, shadow:false,background: '#d8d6cb'},
                legend:{placement:'outside',show:true,location:'e',background:'transparent',marginRight:'30px'}       
            });

            });