How to take a JSON with nested JSONS to an html table?

Question

I've got a JSON which some dictionaries inside it. I need to generate an html table so each outer key will be a column of the table. Inner key-value pairs should at least be added as a single text (I think there could be nested cells to represent it but it would make it more complicated).

I had used dynatable library but due the structure of the received JSON it will fail to render a table properly.

This is my code:

function pintarTablaInutil(diferencias) {

    $("#tableDiv").empty()
    var th = ""
    for (var i = 0; i<numeroPuntos; i++) {
        if ($("#check"+i).is(':checked')) {
            th += '<th>' + (i+1) + '</th>'
        }
    }

    var table = "<table id='resultados' class='table'><thead>" + th + '</thead><tbody></tbody></table>'
    $("#tableDiv").append(table)
    $('#resultados').dynatable({

        features: {
            paginate: false,
            sort: false,
            search: false,
            perPageSelect: false,
            recordCount: false
        },
        dataset: { records: diferencias },
        params: {
          records: '_root'
        }  
    })
}

First loop is just to see how many columns I'm managing.

This is an example of JSON structure:

"diferencias": {
    "1": {
      "1": 46.0, 
      "0": 45.0, 
      "2": 49.0
    }, 
    "2": {
      "1 2": 3.0, 
      "0 1": 0.3333333333333333
    }, 
    "3": {
      "0 1 2": 0.6666666666666666
    }
  }

What solution could I get? I'm using Bootstrap, just in case.

Answer 1

I've created a JSFiddle that I hope helps.

I used Underscore to remap the data. I also cleaned up your method a bit. The "checked" value seemed unclear to me.

var diferencias = {
    "1": {
        "1": 46.0,
        "0": 45.0,
        "2": 49.0
    },
    "2": {
        "1 2": 3.0,
        "0 1": 0.3333333333333333
    },
    "3": {
        "0 1 2": 0.6666666666666666
    }
};

var row = {};
_.map(_.keys(diferencias), function(val) {
    row[val] = JSON.stringify(diferencias[val]);
});
var dataset = [row];