如何为 jQuery 数据表翻译我的 JSON 结构？

Question

我想用 DataTables 构建一个通用的 CSV 查看器。

“通用”意味着它应该能够读取外部获取的任何 CSV 并表示为 Jquery 数据表

我从 JSON 结构（在 CSV 解析后获得）开始并定义此表：

姓名	姓	年龄
斯特凡诺	Rxxxx	45
测试	假	50

然后我想显示为 Jquery 数据表（ https://datatables.net/ ）但不清楚为什么我无法达到我的目标：

 $(function() { data = [ {"Name":"Stefano","Surname":"Rxxxx","Age":"45"}, {"Name":"Test","Surname":"Dummy","Age":"50"} ] columns = []; $.each(data[0], function(k, v) { $('#example > thead > tr').append("<td>" + k + "</td>"); columns.push(k); }); console.log(columns); $('#example').DataTable({ data: data, columns: columns }); });

 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"/> <script src="https://code.jquery.com/jquery-3.6.1.js"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> <table id='example' class='display'> <thead><tr></tr></thead> </table>

在控制台上我有：

1. 一个警告

jquery.min.js:2 jQuery.Deferred 异常：无法使用“in”运算符在名称中搜索“长度”类型错误：无法使用“in”运算符在名称中搜索“长度”

2. 一个错误

jquery.min.js:2 Uncaught TypeError: Cannot use 'in' operator to search 'length' in Name

...但我不清楚将 JSON 表转换为 JQUERY 数据表的代码中有什么问题或缺失。

任何帮助表示赞赏。

Answer 1

您的列结构不是列的有效 DataTables 结构。 它需要（在您的情况下）定义每列需要使用的title和data选项。

如果您更改 JavaScript 以构建该结构，则可以成功使用 columns: columns （无需其他更改）。

您可以重新安排构建columns的逻辑，如下所示：

$.each(data[0], function(k, v) {
  columns.push({ title: k, data: k });
});

这将构建以下 output：

[ { title: 'Name', data: 'Name' }, { title: 'Surname', data: 'Surname' }, { title: 'Age', data: 'Age' } ]

演示：

 $(function() { data = [{ "Name": "Stefano", "Surname": "Rxxxx", "Age": "45" }, { "Name": "Test", "Surname": "Dummy", "Age": "50" } ] columns = []; $.each(data[0], function(k, v) { columns.push({ title: k, data: k }); }); $('#example').DataTable({ data: data, columns: columns //columns: [ { title: 'Name', data: 'Name' }, { title: 'Surname', data: 'Surname' }, { title: 'Age', data: 'Age' } ] }); });

 .display { margin-top: 20px; }

 <head> <meta charset="UTF-8"> <title>Demo</title> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" /> <script src="https://code.jquery.com/jquery-3.6.1.js"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> </head> <body> <table id='example' class='display'></table> </body>

Answer 2

您可以 map 第一个对象的键来获取您的列，您可以 map 数据来获取 arrays 的数组，这正是 DataTables 所期望的。

 $(function() { const data = [{ "Name": "Stefano", "Surname": "Rxxxx", "Age": "45" }, { "Name": "Test", "Surname": "Dummy", "Age": "50" } ]; // get the first object's keys and dump them into an array of objects const columns = Object.keys(data[0]).map(i => ({title: i})); // get the values from each data object and add it to a new array of arrays const formattedData = data.map(i => Object.values(i)); $('#example').DataTable({ data: formattedData, columns: columns }); });

 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" /> <table id='example' class='display'></table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>