How to iterate over JSON object in JavaScript and create table with it?

Question

I have a JSON with this structure:

diferencias = {
    "1": {
      "1": 543.0, 
      "0": 542.0
    }, 
    "2": {
      "0 1": 0.3333333333333333
    }
}

I need to obtain a table with outer keys as columns.

I wrote the following code:

$("#pinchetabla").empty()
    var tr = ""
    for (d in diferencias) {
        var r = ''
        for (dd in d) {
            //console.log(dd)
            r += '<tr>' + 'f[' + diferencias.dd + ']=' + diferencias.d.dd + '</tr>'
        }
        tr += r
    }

    var table = "<table id='resultados' class='table table-condensed'>" + tr + "</table>"
$("#pinchetabla").append(table)

I've got following jsfiddle

Where pinchetabla is a div. However I can't even properly access the JSON keys and values. What am I missing?

Instead of for(dd in d) your need for (dd in diferencias[d]) for a start. — Matt Burland
– Matt Burland, Commented Mar 18, 2014 at 15:43

thefourtheye · Accepted Answer · 2014-03-18 15:58:30Z

3

When you access properties with dot notation, like this object.propertyname, JavaScript will look for propertyname in the object. In your case, d and dd are mere keys in the object, but JavaScript will be looking for them in the diferencias and fails to find them.

In order to access the properties dynamically, you have to use subscript/bracket notation, like this

r += '<tr>' + 'f[' + d + ']=' + diferencias[d][dd] + '</tr>';

Also the for loop should be like this

for (dd in diferencias[d]) {

Your table creation code can be fixed like this

var tr = "";
for (d in diferencias) {
    var r = '<tr>';
    for (dd in diferencias[d]) {
        r += '<td>' + 'f[' + d + ']=' + diferencias[d][dd] + '</td>';
    }
    tr += r + '</tr>';
}

edited Mar 18, 2014 at 15:58

answered Mar 18, 2014 at 15:41

thefourtheye

241k53 gold badges466 silver badges505 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

doog abides · Accepted Answer · 2014-03-18 15:49:20Z

1

Couple of problems.

When you iterate a dictionary in javascript it returns the keys. So your inner iteration loop should be for(dd in diferencias[d])
You need <td> tags as well.
You need to instantiate var tr before you use it (tr += r)

http://jsfiddle.net/fQ9Py/1/

answered Mar 18, 2014 at 15:49

doog abides

2,29718 silver badges13 bronze badges

2 Comments

diegoaguilar Over a year ago

Thanks! Anny suggest to make table better, I actually would like to obtain a column for each outer key and its inner keys as subcolumns inside each. I'd thank you soo much

doog abides Over a year ago

I kind of assumed you were just using the table to get a feel for the iteration. Although a bit ugly, this edit jsfiddle.net/fQ9Py/2 shows how to use <td rowspan=x> to group your rows by category. You could also create entire tables nested instead of just using rowspan, depends on what you want/need.

Collectives™ on Stack Overflow

How to iterate over JSON object in JavaScript and create table with it?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related