Getting keys from JSON

Question

I've read through a couple of dozen of these questions, but I can't find this solution. I want to output the key of a JSON key:value pair. Assuming the JSON is like this:

{"group":[
{"ed":"BDeveloper","st":"New","type":"B"},
{"ed":"BDeveloper","st":"Cancelled","type":"B"}
]}

I want to scrape the "ed", the "st", etc. out of the pair using jQuery if possible.

I currently have code around it to output the data:

$.getJSON('sum.php', function(JSONsum)
        {
        var summaryHTML ='';
        $.each(JSONsum.group, function (i)
            {
            console.log("this.ed: ["+i+"] "+this.ed);
            // console.log("this.name: ["+i+"] "+this.something??? );

            summaryHTML+='<div class=\"grid_3\">'+this.ed+'</div>';
            summaryHTML+='<div class=\"grid_1\">'+this.type+'</div>';
            summaryHTML+='<div class=\"grid_2\">'+this.st+'</div>';
            summaryHTML+='<div class=\"clear\"></div>';
            });
        $('#summary').append(summaryHTML);
        }); 

But I want to be able to output the key in the console.log and use it in other places, etc.

Is it even possible? Thanks in advance

Answer 1

Change the fourth line to: $.each(JSONsum.group, function (i,e)

i is the key/index and e is the value. Adding a console.log(i+" : "+e); should do it. Take a look at the full documentation of each.

Answer 2

Your code can look like following:

var jsonSum = {group:[
        {ed:"BDeveloper",st:"New",type:"B"},
        {ed:"BDeveloper",st:"Cancelled",type:"B"}
    ]},
    summaryHTML='',
    group=jsonSum.group;

for (var i=0, l=group.length; i<l; i++) {
    var obj=group[i];
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            if (typeof console !== "undefined") {
                console.log("this." + prop + "["+i+"]: '" + obj[prop] + "'");
            }
            summaryHTML += '<div class=\"grid_' + prop + '\">'+obj[prop]+'</div>';
        }
    }
    summaryHTML += '<div class=\"clear\"></div>';
}
$('#summary').append(summaryHTML);

I replaced the class names grid_1, grid_2, grid_3 to grid_ed, grid_st, grid_type. With the classes defined for example as

.grid_ed {float:left; background-color:red; width: 90px}
.grid_st {float:left; background-color:yellow; width: 90px; margin-left: 10px}
.grid_type {float:left; background-color:green; width: 90px; margin-left: 10px}
.clear {clear:left}

you will have the following results

and

in the log.

You can see this live here.