如何在数据表中循环数组

Question

I am trying to render a table in javascript as follows: 我试图在javascript中呈现一个表，如下所示：

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

Now the integration field is basically an array of json objects as follows 现在， integration字段基本上是一个json对象数组，如下所示

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

Here is the table definition: 这是表定义：

<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>

So on UI I can see [object Object],[object Object] in the column integrations. 所以在UI上我可以在列集成中看到[object Object],[object Object] 。 How do we loop over the json array to display the name field in the column 我们如何遍历json数组以在列中显示name字段

Answer 1

Use the render as following. 使用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;
   }

Working Example : 工作实例：

  <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>

Answer 2

Basically, you need to use render option again. 基本上，您需要再次使用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;
                   }
                 }
            ]
  });

Answer 3

You Have to create table in javascript as below 你必须在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);

如何在数据表中循环数组

问题描述

3 个解决方案

解决方案1
1 2018-03-07 07:35:47

解决方案2
1 已采纳 2018-03-07 07:38:19

解决方案3
0 2018-03-07 07:31:53

如何在数据表中循环数组

问题描述

3 个解决方案

解决方案1 1 2018-03-07 07:35:47

解决方案2 1 已采纳 2018-03-07 07:38:19

解决方案3 0 2018-03-07 07:31:53

解决方案1
1 2018-03-07 07:35:47

解决方案2
1 已采纳 2018-03-07 07:38:19

解决方案3
0 2018-03-07 07:31:53