jQuery 如何在 DataTables 中实现嵌套的 $.each()

Question

我从服务器获取 Json 数据，以便使用 DataTables 显示信息。

在这个json中，有行，列中可能存在多个值，所以它是一个多维数组如下（我只展示了数组的摘录）：

{
    "info_table": [
        {
            "date": "2015-01-06",
            "subject": "Some subject or title",
            "type": "article",
            "url": null,
            "pdf": null,
            "notes": null,
            "created_at": "2015-06-26 13:38:53",
            "updated_at": "2015-06-26 13:38:53",
            "institute": "Some Institute name",
            "researchers": [
                {
                    "name": "CARL SMITH"
                }
            ],
            "assistants": [
                {
                    "name": "YULIA SMIRNOVA"
                }
            ]
        }
    ]
}

到目前为止，DataTable 工作正常：

$('#notes_table table').append('<thead><tr><th>Researchers</th><th>Date</th></tr></thead><tbody></tbody>');
$.each(response.info_table,function(i,item){
  $('#notes_table').find('tbody').append('<tr><td>'+item.researchers+'</td><td>'+item.date+'</td></tr>');
});

date 列值显示正常，但是，researchers 列仅显示 [object Object]。如果我尝试使用嵌套的 $.each() 如下：

$('#notes_table table').append('<thead><tr><th>Researchers</th><th>Date</th></tr></thead><tbody></tbody>');
 $.each(response.info_table,function(i,item){
   $.each(item.researchers, function(j,item2){
    $('#notes_table').find('tbody').append('<td>'+item2.name+'</td>');
   });
 $('#notes_table').find('tbody').append('<td>'+item.date+'</td>');
});

我什么也没得到，我只是看到一条 DataTables 消息说Sorry, no results found。

我错过了什么？有什么想法吗？

解决方案

感谢 BLSully：

工作代码如下：

  var table = $('#table_id').DataTable({
    columns: [{
      data: 'researchers[, ].name',
      title: 'Researchers'
    }, {
      data: 'date',
      title: 'Date'
    }]  
  });

  table.rows.add(data).draw();

就是这样。

Answer 1

根据您的措辞，我假设您使用的是datatables。鉴于此，我将提供一个替代示例来处理表的数据绑定，该示例利用插件的设计而不是手动 DOM 操作。所以..这并不完全是问题的答案，而是建议以正确的方式做你想要实现的目标（鉴于你提供的上下文。根据你检索数据的方式，可能会有稍作改动）

将正交 json 数据添加到表中的正确方法是创建列定义，以便表知道要显示数据的列，以及有关如何显示数据的规则。

我根据您的数据设置了一个示例（稍微扩展以解释如何处理深度嵌套的对象和数组）。真正相关的是第一列的data 属性：researchers[, ].name。该值的语法指示数据表将属性researchers 视为一个数组，并以逗号分隔的方式显示它。因为数组元素是 JavaScript 对象，所以方括号后面的 .name 指示 DataTables 应该显示对象的哪个属性。

http://live.datatables.net/domivewi/1/

var data = [
        {
            "date": "2015-01-06",
            "subject": "Some subject or title",
            "type": "article",
            "url": null,
            "pdf": null,
            "notes": null,
            "created_at": "2015-06-26 13:38:53",
            "updated_at": "2015-06-26 13:38:53",
            "institute": "Some Institute name",
            "researchers": [{
                    "name": "CARL SMITH"
            },{
                    "name": "JOHN DOE"
            }],
            "assistants": [
                {
                    "name": "YULIA SMIRNOVA"
                }
            ]
        },{
            "date": "2015-01-06",
            "subject": "Some subject or title",
            "type": "article",
            "url": null,
            "pdf": null,
            "notes": null,
            "created_at": "2015-06-26 13:38:53",
            "updated_at": "2015-06-26 13:38:53",
            "institute": "Some Institute name",
            "researchers": [{
                    "name": "FRED FLINSTONE"
            },{
                    "name": "WILMA FLINTSTONE"
            }],
            "assistants": [
                {
                    "name": "BARNEY RUBBLE"
                }
            ]
        }
    ];

  var table = $('#demo').DataTable({
    columns: [{
      //this is the important bit here. See explanation above
      data: 'researchers[, ].name',
      title: 'Researchers'
    }, {
      data: 'date',
      title: 'Date'
    }]  
  });
  
  //this line adds new rows to the table and redraws
  table.rows.add(data).draw();

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}


div.container {
  min-width: 980px;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <table id="demo"></table>
  </body>
</html>

Answer 2

试试这个...

首先将json字符串保存在javascript数组中。

像这样……

var myArray = Array();

myArray = {
    "info_table": [
        {
            "date": "2015-01-06",
            "subject": "Some subject or title",
            "type": "article",
            "url": null,
            "pdf": null,
            "notes": null,
            "created_at": "2015-06-26 13:38:53",
            "updated_at": "2015-06-26 13:38:53",
            "institute": "Some Institute name",
            "researchers": [
                {
                    "name": "CARL SMITH"
                }
            ],
            "assistants": [
                {
                    "name": "YULIA SMIRNOVA"
                }
            ]
        }
    ]
}

// Then Execute like this .. 
$('#notes_table table').append('<thead><tr><th>Researchers</th><th>Date</th></tr></thead><tbody></tbody>');
 $.each(myArray.info_table,function(i,item){
   for( var i; i < item.researchers.length, i++){
    $('#notes_table').find('tbody').append('<td>'+item.researchers[i].name+'</td>');
   });
 $('#notes_table').find('tbody').append('<td>'+item.date+'</td>');
});