嵌套JSON字符串到数据表

时间:2018-11-27 18:02:21

标签: html json datatables

请帮助。我无法使用数据表将JSON解析值与客户名称匹配。我能够用联系信息填充表列,但是在显示的代码创建的表中,两个帐户的解析数据都是相同的。有没有更好的方法来遍历数据以便正确显示。

我已经看到了一些使用简单表执行此操作的示例,但我想尽可能保留数据表的排序功能。任何帮助将不胜感激。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Table 01</title>
</head>
<body>

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="tableId" class="table table-condensed responsive"></table>

</body>
<script>

    var data01 = [
  {
  "name": "EXAMPLE Mickey",
  "due": "2018-11-22T19:00:00.000Z",
  "labels": [
    {
    "name": "Salesperson_1",
    "color": "green"
    }
    ],
  "pluginData": [
          {
          "value": "{\"billContact\":\"Mickey Mouse\",\"billCompany\":\"MM Clubhouse\"}",
          "access": "shared"
          }
      ]
  },
  {
  "name": "EXAMPLE Carl",
  "due": "2018-11-25T19:00:00.000Z",
  "labels": [
    {
    "name": "Salesperson_2",
    "color": "yellow"
    }
    ],
  "pluginData": [
          {
          "value": "{\"billContact\":\"Carl Grimes\",\"billCompany\":\"Rick's Group\"}",
          "access": "shared"
          }
      ]
  }
];


$('#tableId').DataTable({
  data: data01,
  "columns": [
    {"data": "name"},
    {"data": "due"},
    {"data": "labels.0.name"},
    {"data": "pluginData.0.value"},  
    {"data": function(){

      for (var i=0; i < data01.length; i++){
        var values = data01[i].pluginData[0].value;


        var parsedVal = JSON.parse(values);

        var contact = parsedVal.billContact;      

        return contact;

        //console.log(contact);
      }
    }}
  ]
});

</script>


</html>

1 个答案:

答案 0 :(得分:1)

将函数传递给列时,会将参数传递给该函数,该参数代表数据的一个条目。因此,无需自己遍历数据,jQuery就是为您完成的。

$('#tableId').DataTable({
  data: data01,
  "columns": [
    {"data": "name"},
    {"data": "due"},
    {"data": "labels.0.name"},
    {"data": "pluginData.0.value"},  
    {"data": function (row){

      let values = row.pluginData[0].value;

        let parsedVal = JSON.parse(values);

        let contact = parsedVal.billContact;      
        return contact;
    }}
  ]
});

如果您自己进行迭代,则该函数将在return语句处终止。因此,每次调用该函数时,它只会看到第一个条目并返回它并在该点停止。