DataTables JavaScript库和嵌套JSON [英] DataTables javascript library and nested JSON

问题描述

我正在使用DataTables JavaScript库在网页上的交互式表中提供一些数据。我感兴趣的例子看起来像这个。此表格非常好，因为显示额外（详细）信息的子行可以显示，然后隐藏。我试图显示的JSON数据看起来像这样

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

我希望我的桌子有学生名字，主题1平均，主题2平均和主题3平均的列。当一行被扩展时，它应该以学生名称为每个主题区域的每个猫（连续评估测试）的分数。

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.

目前我不确定如何处理嵌套数据。
在该示例中，格式（d）功能显示更多数据，但数据非常简单。

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

我的问题是如何让javascript解码每个项目的主题'字段'，并在展开时将其显示在表中。
我真的不是很熟悉javascript或JSON。我更熟悉桌面上的Python。我甚至不知道这是否是最好的图书馆。

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.

如果有一些与python有用的东西，分享虽然我怀疑当在网页上显示数据时，javascript是king

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

推荐答案

有趣的一个。基本上这是一个使用 $。每个迭代对象/对象的问题。这里的一个工作示例（ http://jsfiddle.net/annoyingmouse/mqrckaft/ ）虽然我是不是100％肯定我喜欢你的数据的格式。可能在每一行的渲染上计算出平均值，而不是在服务器端进行测试，因为我猜你是？此外，孩子行之间的链接似乎是模糊的，没有错过的值等等。

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.

这篇关于DataTables JavaScript库和嵌套JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！