如何正确转换数据表的 JSON

Question

我是 JSON 新手，我很难弄清楚如何编写我的脚本以便我可以使用数据表显示它

我的 JSON 数据如下所示

{  "success": true,
"data": {
"events": {
"My Event Name": {
"date": "january 1, 2017",
"place": "My Home",
"participants": ["Merly", "Sonia"],
"ideas": {
"this is an idea": {
"idea_detail": {
"deets": ["1.00", "1.00"]
},
"last_update": 1517977880
},
"another idea": {
"idea_detail": {
"deets": ["1.02", "12.00"]
},
"last_update": 1517977882
}
},
"info": {
"display_name": "Display",
"num": 2,
"date": 1517977921
}
},
}
}
}  

经过研究，这就是我想出的：

$(document).ready( function() {
$('#example').DataTable({ 
'ajax'       : {
"type"   : "POST",
"url"    : "<?php echo get_template_directory_uri();?>/trial.txt",
"dataSrc": function (json) {
var return_data = new Array();
var events = new Array();
var events = $.map(json.data.events, function(value, index) {
return value;
}); 
for(var i=0;i < events; i++){
return_data.push({
'event': json.data.events[i],
'date': json.data.events[i].date,
'place': json.data.events[i].place,
'participants': json.data.events[i].participants,
'ideas': json.data.events[i].ideas,
'detail': json.data.events[i].ideas[i].idea_detail[i],
'last_update': json.data.events[i].ideas.last_update,
'info': json.data.events[i].info
})
}
return return_data;
}
},
"columns"    : [
{'data': 'event'},   
{'data': 'date'},
{'data': 'place'},
{'data': 'participants'},
{'data': 'ideas'},
{'data': 'detail'},
{'data': 'last_update'},
{'data': 'info'}  ]
})
} );

我可能做错了这一切，我希望有人能把我推向正确的方向。 提前谢谢你

Answer 1

Datatables 需要一个对象数组，看起来您正在尝试构建这些对象。 我的第一个问题是，您能否让服务器代码以正确的格式返回数据？ 要使数据表在不加修改的情况下使用它，您需要像这样格式化它：

{  "success": true,
"data": {
"events": [
{ "event": "My Event Name",
"date": "january 1, 2017",
"place": "My Home",
"participants": ["Merly", "Sonia"],
"ideas": {
"this is an idea": {
"idea_detail": {
"deets": ["1.00", "1.00"]
},
"last_update": 1517977880
},
"another idea": {
"idea_detail": {
"deets": ["1.02", "12.00"]
},
"last_update": 1517977882
}
},
"info": {
"display_name": "Display",
"num": 2,
"date": 1517977921
}
},
.....next record.....
]
}
}  

使用此结构，您可以将 ajax.dataSrc 设置为：dataSrc: "data.events"。 您所要做的就是担心 如何显示ideas.

根据您的要求，ideas对象似乎是行详细信息的良好候选项。 当用户想要查看该对象时，可以动态分析该对象。

但是，我认为您目前问题的根源是：

for(var i=0;i < events; i++){

我想你想要这个：

for(var i=0;i < events.length; i++){

下一个领域是这样的：

'ideas': json.data.events[i].ideas,
'detail': json.data.events[i].ideas[i].idea_detail[i],

您需要一个单独的 for 循环来将每个ideas处理成要显示的结构。.ideas[i].idea_detail[i]会给你数组索引错误，因为i并没有真正循环遍历对象的这些部分。

我建议暂时忽略ideas部分，只显示基本数据。 一旦你得到它，那么我们就可以讨论ideas。 需要知道您希望如何显示它，我们可以帮助您适当地解析它。