DataTables javascript库和嵌套JSON

我希望使用DataTables javascript库在网页上的交互表中显示一些数据。我感兴趣的示例如下所示。这个表很好，因为可以显示然后隐藏显示额外（详细）信息的子行。我试图显示的JSON数据如下所示

    {
  "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"
    }
  ]
}

我希望我的表中有学生姓名、科目1平均值、科目2平均值和科目3平均值列。当一行展开时，应在学生姓名下显示每个科目领域的cat（连续评估测试）分数

目前我不确定如何处理嵌套数据。 在本例中，format（d）函数显示更多数据，但数据非常直接

/* 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>';
}

/*行详细信息的格式化功能-根据需要进行修改*/
函数格式（d）{
//`d`是该行的原始数据对象
返回“”+
''+
'全名：'+
''+d.name+''的+
''+
''+
'分机号码：'+
“+d.extn+”+
''+
''+
'额外信息：'+
'以及此处的任何进一步细节（图像等）…'+
''+
'';
}

我的问题是如何让javascript解码subjects“field”中的每个项目，并在展开时在表中显示它们。 我真的不太熟悉javascript或JSON。我更熟悉桌面上的Python。我甚至不确定这是不是最好的图书馆

---

如果有什么东西可以与python配合使用，请分享，尽管我怀疑当涉及到在网页上显示数据时，javascript是最有意思的。基本上，这是一个使用

$对对象进行迭代的问题。这里有一个工作示例（），但我不是100%确定我喜欢您的数据格式。也许可以计算出每行渲染的平均值，而不是像我猜的那样在服务器端进行？此外，子行之间的链接似乎模糊不清，不允许遗漏值等。
在收到来自ajax的响应后，您可以尝试以下操作：

 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>';
                    //    //}
                    //}

                ],

        });
    });

响应成功（功能（数据）{
json=json.parse（data.d）；
if（json.Table！=0）{
$（'tablaReportes'）。数据表({
“毁灭”：真的，
“搜索”：错误，
“命令”：错误，
“长度变化”：错误，
“页面长度”：1，
//----------------------------------------------------
数据：json.Table，
栏目：[
{'data'：'C019fechaRegistro'}，
{'data'：'C019alertaIn'}，
{'data'：'C019accionIn'}，
{'data'：'c019nomusario'}，
{'defaultContent'：“ ”
+ " "
}
//{
////“呈现”：函数（）{
////返回“ ”+
////        '';
//    //}
//}
],
});
});
您的JSON格式不正确，您能改为生成吗？谢谢，我查看了工作示例“good stuff”，我在本地机器上试用了它，但无法获得任何数据。我怀疑在笔记本电脑上运行它时出现的问题与“ajax”有关：{“url”：“/echo/js/？js=”+encodeURIComponent（JSON.stringify（data）），}如何使数据从本地数据部分加载，甚至从具有相同数据的本地文件加载？您好，
encodeURIComponent
是一种让JSFIDLE模拟ajax调用的方法，只需将其替换为以前的调用即可。希望对您有所帮助。