如何在 JQuery 的 foreach 中有一个 foreach？答案

【问题标题】：How to have a foreach inside a foreach in JQuery?如何在 JQuery 的 foreach 中有一个 foreach？
【发布时间】：2011-01-15 03:18:27
【问题描述】：

大家好！首先，我知道这种东西很糟糕，但这就是我想象实现目标的方式。

这里是交易：我有一个包含数组的 JSon 对象，但不幸的是，我必须遍历一个 JSon 对象的列表，然后遍历我之前提到的那个数组。 JSon 对象如下（是葡萄牙语，不过你们可以看懂）：

{"produtos":[{"Key":"DERIVADOS DE FERRO","Value":217816909},{"Key":"MADEIRAS, SUAS MANUFATURAS E MOBILIÁRIO MÉDICO CIRÚRGICO","Value":117812290},{"Key":"CELULOSE, 帕佩尔·苏阿斯 OBRAS","Value":100086937},{"Key":"CARNE SUÍNA","Value":81738783},{"Key":"CARNE BOVINA","Value":74894768},{"Key":"CARNE DE AVES","Value":65292433},{"Key":"Outros","Value":444520811}],"ano":2005,"tipo":1}

Produtos 是我提到的数组，还有另外两个重要的值：ano（年份）和 tipo（类型）。我的代码如下：

jQuery.getJSON("/webportos/Porto/GraficoComercio?id=" + iddoporto.className + "&ano=2005", null, function (items) {                
    jQuery.each(items, function (itemNo, item) {
        jQuery.each(item.produtos, function (dicNo, dic) {
            options.series.push({ name: dic.Key, data: dic.Value});                             
            options.title.text = "Comércio - "+item.ano;
            options.yAxis.title.text = "Exportação";                                
            options.tooltip.formatter = function () {
                return '<b><u>' + this.series.name + '</u></b><br/><b>' + this.x + '</b>: ' + this.y + ' ';
            }           
        });
    });

    chart = new Highcharts.Chart(options);              
});

这段代码让 Chrome javascript 控制台显示：

ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js:32 Uncaught TypeError: Cannot read property 'length' of undefined

你们能帮帮我吗？

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

这是因为您试图在非数组上使用 .each() 吗？

jQuery.each(items, function (itemNo, item) {

据我了解，jQuery.each(object, callback, args) 仅用于数组。它做的第一件事是调用object.length。所以除非你有

[{"produtos":[{"Key":"DERIVADOS DE FERRO","Value":217816909},{"Key":"马德拉斯, SUAS MANUFATURAS E MOBILIÁRIO MÉDICO CIRÚRGICO","Value":117812290},{"Key":"CELULOSE, PAPEL E SUAS OBRAS","Value":100086937},{"Key":"CARNE SUÍNA","Value":81738783},{"Key":"CARNE BOVINA","Value":74894768},{"Key":"CARNE DE AVES","Value":65292433}, {"Key":"Outros","Value":444520811}],"ano":2005,"tipo":1}]

你会得到那个错误。

另外，您可以考虑狄奥迪斯的建议。 jQuery.each 的性能比只使用 for 循环数据要差很多。

【讨论】：

【解决方案2】：

您不需要 jQuery 来遍历 JSON 数据。使用普通的旧 Javascript。

看到这个问题：Display JSON/YAML hierarchy as a tree in HTML?

function renderJSON(obj) {
    var keys = []
    var retValue = ""
    for (var key in obj) {
            if(typeof obj[key] == 'object') {
                    retValue += "<div class='tree'>" + key                                          
                    retValue += renderJSON(obj[key])
                    retValue += "</div>"
            }
            else {
                    retValue += "<div class='tree'>" + key + " = " + obj[key] + "</div>"
            }

       keys.push(key)
    }
    return retValue
    }

【讨论】：