如何将嵌套的 JSON 数据设置为数据表？

Question

我有一个包含对象和数组的（嵌套）数据结构。并尝试发送数据表，但只显示一个值。

JSON 数据：

 {
"data": [{
  "name": "name1",
  "value": "value1",
  "list": [{
    "sname": "sname1",
    "svalue": "svalue1"
  }, {
    "sname": "sname2",
    "svalue": "svalue2"
  }]
}]
}

使用 Java 通过 URL 获取 JSON 数据。

jQuery 代码：

var pk = $("#pk").val();
console.log(pk);
url = "/register/search?id=" + pk;
console.log(url);
$('#largeTable').DataTable({
"ajax": url,
"bDestroy": true,
"columns": [{
  "data": "name"
},
{
  "data": "value"
},
{
  "data": "list.1.sname"
},
{
  "data": "list.1.svalue"
},
{
  "data": null,
  "defaultContent": editview
}
]
});

这里可以使用list.1 或list.0 显示第一个或第二个list 值

但我一次想要两个值。

Answer 1

如果您使用渲染或 mRender，您可以对对象做您想做的事情。例如，您可以像本例中那样遍历数组。

$('#largeTable').DataTable({
    "columnDefs": [
       {"targets": [0], "title":"name", "data":"name"},
       {"targets": [1], "title":"value", "data":"value"},
       {"targets": [2], "title":"list", "data":"list", "type":"html"
            "render":function(data){
                 var listArray = data;
                 var listHtml = "";
                 for(var i=0;i<listArray.length;i++) {
                     listHtml += listArray[i].sname + " " + listArray[i].svalue + "<br>";
                 } 
                 return listHtml;
             },
    }]
});

$.ajax({
     "type":"GET",
     "url":url,
     "success":function(data,status) {
           var jsonData = $.parseJSON(data);
           $('#largeTable').dataTable().fnAddData(jsonData);
     }

Answer 2

您在 json 数据结构中的 list 是一个数组。所以，你应该使用

list.forEach(function(element) {
    //console.log(element);
});

您可以创建一个对象并动态构建 JSON 并将其设置为“列”数组。

这是一个例子：

// make an empty object
var myObject = {};

// set the "list1" property to an array of strings
myObject.list1 = ['1', '2'];

// you can also access properties by string
myObject['list2'] = [];
// accessing arrays is the same, but the keys are numbers
myObject.list2[0] = 'a';
myObject['list2'][1] = 'b';

myObject.list3 = [];
// instead of placing properties at specific indices, you
// can push them on to the end
myObject.list3.push({});
// or unshift them on to the beginning
myObject.list3.unshift({});
myObject.list3[0]['key1'] = 'value1';
myObject.list3[1]['key2'] = 'value2';

myObject.not_a_list = '11';