DataTables javascript library and nested JSON

Question

I am looking to present some data in an interactive table on a web page, using the DataTables javascript library. The example I am interested in looks like this . This table is great because child rows showing extra(detailed) information can be shown and then hidden. The JSON data I am trying to display looks like this

    {
  "data": [
    {
      "student_name": "jack",
      "subjects": {
        "math": {
          "cat1_grade": "30",
          "cat2_grade": "39",
          "cat3_grade": "38"
        },
        "english": {
          "cat1_grade": "30",
          "cat2_grade": "39",
          "cat3_grade": "38"
        },
        "swahili": {
          "cat1_grade": "30",
          "cat2_grade": "39",
          "cat3_grade": "38"
        }
      },
      "subject1_average": "35",
      "subject2_average": "26",
      "subject3_average": "59"
    }
  ]
}

I want my table to have columns for student name,subject1 average,subject2 average and subject3 average. When a row is expanded it should have under the student name their scores for each one of the cat(continuous assesment tests) for each subject area.

Currently I am not sure how to deal with the nested data. In the example the format(d) function displays more data, but the data is pretty straight forward.

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

My question is how do I get the javascript to decode each of the items in the subjects 'field' and display them in the table when expanded. I am not really familiar with javascript or JSON really. I am more familiar with Python on desktops. I am not even sure if this is the best library.

If there's something that works well with python, do share though I suspect that when it comes to displaying data on a web page, javascript is king

Answer 1

Interesting one this. Basically it's a question of iterating over the object/objects using $.each . A working example here ( http://jsfiddle.net/annoyingmouse/mqrckaft/ ) though I'm not 100% sure I like the format of your data. It might be possible to work out the average on the render of each row rather than doing it server-side as I'm guessing you are? Also, the link between child rows seems nebulous, there is no allowance for missed values etc.

Answer 2

After have a response from the called ajax, you can try the following:

 resp.success(function (data) {

    json = JSON.parse(data.d);

    if (json.Table != 0) {

        $('#tablaReportes').DataTable({

            "destroy": true,
            "searching": false,
            "ordering": false,
            "lengthChange": false,
            "pageLength": 1,

            //----------------------------------------------------

            data: json.Table,

            columns: [
                    {'data': 'C019fechaRegistro'},
                    {'data': 'C019alertaIn'},
                    {'data': 'C019accionIn'},
                    {'data': 'C019NomUsuario'},
                    {'defaultContent': "<button type='button' class='btn btn-warning' onclick='grafica()'> <span class='fa fa-line-chart'></span></button>&nbsp"
                        + "<button type='button' class='btn btn-primary' onclick='verObservacion()'> <span class='fa fa-comments-o'></span></button>"
                    }
                    //{
                    ////    'render': function () {

                    ////    return '<button type="button" onclick="grafica()" id="ButtonEditar" class="btn btn-warning"><span class="fa fa-line-chart"></span></button>&nbsp' +
                    ////        '<button type="button" class="btn btn-primary" onclick="verObservacion()"><i class="fa fa-comments-o"></i></button>';
                    //    //}
                    //}

                ],

        });
    });