如何遍历数据表中的数组答案

【问题标题】：How to loop over an array in datatable如何遍历数据表中的数组
【发布时间】：2018-03-07 07:22:26
【问题描述】：

我正在尝试在 javascript 中呈现一个表格，如下所示：

$('#serviceTable').DataTable({
        responsive: true,
        aaData: services,
        bJQueryUI: true,
             aoColumns: [
                     { mData: 'service_name' },
                     { mData: 'last_incident' },
                     { mData: 'integration' }
                ]
      });

现在integration字段基本上是一个json对象数组，如下

[{"name":"abc","key":"123"},{"name":"xyz","key":"1234"}]

这是表定义：

<table id="serviceTable" class="table table-bordered table-striped">
  <thead>
  <tr>
    <th data-field="service_name" data-formatter="LinkFormatter">Service</th>
    <th data-field="last_incident">Last Incident</th>
    <th  data-field="integration">Integration</th>
  </tr>
  </thead>
</table>

所以在 UI 上，我可以在列集成中看到 [object Object],[object Object]。我们如何遍历json数组以在列中显示name字段

【问题讨论】：

你希望 abc 在列中

标签： javascript jquery html datatables

【解决方案1】：

如下使用render。

    { mData: 'integration', 
     "render": function(value, type, row, meta){
     var output="";
     for(var i=0;i<value.length;i++){
       output +=  value[i].name ;
       if(i< value.length-1){
         output +=", ";
       }
     }
     return output;
   }

工作示例：

  <head>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  </head>

  <body>
    <table id="serviceTable" class="table table-bordered table-striped">
        <thead>
          <tr>
                <th data-field="service_name" data-formatter="LinkFormatter">Service</th>
                <th data-field="last_incident">Last Incident</th>
                <th  data-field="integration">Integration</th>
          </tr>
          
  </thead>
</table>
  </body>
  <script>
  var service=[{"service_id" :"1", "service_name":"s1","last_incident":"i1","integration":[{"name":"abc","key":"123"},{"name":"xyz","key":"1234"}]}
        ,{"service_id" :"2", "service_name":"s2","last_incident":"i1","integration":[{"name":"abc","key":"123"},{"name":"xyz","key":"1234"}]}
        ];
    $('#serviceTable').DataTable({
        responsive: true,
        aaData: service,
        bJQueryUI: true,
             aoColumns: [
                     { 
                       mData: 'service_name' ,
                       "render": function(value, type, row, meta){
                        return "<a href='/service/"+row.service_id+"'>"+value+"</a>";
                       }
                     },
                     { mData: 'last_incident' },
                     { mData: 'integration', 
                     "render": function(value, type, row, meta){
                         var output="";
                         for(var i=0;i<value.length;i++){
                           output +=  value[i].name ;
                           if(i< value.length-1){
                             output +=", ";
                           }
                         }
                         return output;
                       }
                     
                       
                       
                     }
                ]
      });
     
  </script>

【讨论】：

【解决方案2】：

基本上，您需要再次使用render 选项。

Working Fiddle

var service=[
             {
               "service_id" :"1", 
               "service_name":"Service 1",
               "last_incident":"l_i1",
               "integration": [{"name":"abc","key":"123"},
                              {"name":"xyz","key":"1234"}]
          },
          {
            "service_id" :"2", 
            "service_name":"Service 2",
            "last_incident":"l_i2",
            "integration": [{"name":"abc","key":"123"},
                           {"name":"xyz","key":"1234"}]
          }
        ];

$('#serviceTable').DataTable({
    responsive: true,
    aaData: service,
    bJQueryUI: true,
         aoColumns: [
                 { 
                   mData: 'service_name' ,
                   "render": function(value, type, row){
                    return '<a href="/service/'+row.service_id+'">'+value+'</a>';
                   }
                 },
                 { mData: 'last_incident' },
                 { mData: 'integration',
                     render: function (value, type, row) {
                        var val = [];
                        $.each(value, function(i, v){
                            val.push(v['name']);
                      })
                      return val;
                   }
                 }
            ]
  });

【讨论】：

【解决方案3】：

您必须在 javascript 中创建表格，如下所示

var rows = [{"name":"abc","key":"123"},{"name":"xyz","key":"1234"}]
     var html = "<table border='1|1'>";
        for (var i = 0; i < rows.length; i++) {
            html+="<tr>";
            html+="<td>"+rows[i].name+"</td>";
            html+="<td>"+rows[i].key+"</td>";
            html+="</tr>";

        }
        html+="</table>";
        $("div").html(html);

【讨论】：