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

jQuery如何在DataTables中实现嵌套的$ .each（）

2 个答案: