How to have a foreach inside a foreach in JQuery?

Question

Hey guys! First of all, I know this kind of stuff is quite shitty, but that's the way I visualize achieving my goal.

Here is the deal: I have a JSon object that contains an array, but unfortunately, I have to iterate through the list of one JSon object, and then iterate throught that array I mencioned before. The JSon object look as follows (it is in portuguese, but you guys can understand it):

{"produtos":[{"Key":"DERIVADOS DE FERRO","Value":217816909},{"Key":"MADEIRAS, 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}

Produtos is the array I mentioned, and I have two other values that are important: ano (year) and tipo (type). My code look as follows:

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

This piece of code makes Chrome javascript console to display:

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

Can you guys help me out?

Answer 1

Is this because you're trying to use .each() on a non array?

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

From my understanding, jQuery.each(object, callback, args) is only for use on arrays. The first thing it does is make a call to object.length. So unless you have

[{"produtos":[{"Key":"DERIVADOS DE FERRO","Value":217816909},{"Key":"MADEIRAS, 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}]

you're gonna get that error.

Additionally, you may take Diodeus's suggestion into consideration. jQuery.each is quite a bit less performant than just using a for to loop through your data.

Answer 2

You don't need jQuery to iterate through JSON data. Use plain old Javascript.

See this question: 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
    }