多维数组和 jQuery 的 getJSON答案

【问题标题】：Multidimensional Arrays and jQuery's getJSON多维数组和 jQuery 的 getJSON
【发布时间】：2009-03-30 21:07:49
【问题描述】：

我已向我的应用程序中的控制器提交了一个 getJSON 请求，该控制器正在返回带有 2 个“应用程序”的有效 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"}]}

预期结果：

测试

实际结果（来自 Firebug）：

applicationList[0] 未定义

如果我用下面的代码替换上面的alert()，我会得到一个带有“删除”文本的警报窗口：

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

现在，我的想法是 alert() 的 JSON 请求没有及时完成，因此我将使用命名回调函数来确保请求已完成：

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...

我觉得我快到了，但在过去的一个小时里我已经快到了，我觉得我现在只是在污染源头，试图让它发挥作用。

【问题讨论】：

标签： javascript jquery json

【解决方案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 会继续运行。您的解决方案不起作用，因为将其设为命名回调并不会改变在您已经尝试初始化菜单之前不会触发它的事实。我所做的所有解决方案就是将菜单初始化代码移动到回调内部，因为那时并且只有这样您才能访问填写的应用程序列表。

【讨论】：

可以（并且可能应该）将“applicationList”和“applicationMenu”变量定义移动到您的 getJSON 匿名函数中。

【解决方案2】：

你是对的，你应该只在 getJSON 回调完成后使用你的“applicationList”变量。

您应该在 getJSON 回调中调用 Ext.menu.Menu()，在 jQuery.each() 之后。

【讨论】：

【解决方案3】：

Paolo Bergantino 的解决方案应该可以工作，但您也可以按照自己的方式进行操作，使用命名的回调函数——您只是在代码中犯了一些小错误：

数据不应声明为变量——“函数 get_applications(data)”中的数据仅代表 .getJSON 返回的任何内容
.getJSON 中的回调函数应该只是函数的名称，没有（数据）

这是更正后的代码：

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'];
        });
};

【讨论】：

【解决方案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'
    }
  });
});

【讨论】：