How to loop over an array in datatable

Question

I am trying to render a table in javascript as follows:

$('#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

[{"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. How do we loop over the json array to display the name field in the column

you want abc in coloumn

Akshay
– Akshay

2018-03-07 07:26:55 +00:00
Commented Mar 7, 2018 at 7:26 — Akshay
– Akshay, Commented Mar 7, 2018 at 7:26

PSK · Accepted Answer · 2018-03-07 07:35:47Z

Use the render as following.

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

Tony Stonks · Accepted Answer · 2018-03-07 07:38:19Z

Basically, you need to use render option again.

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;
                   }
                 }
            ]
  });

SF..MJ · Accepted Answer · 2018-03-07 07:31:53Z

0

You Have to create table in javascript as below

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

answered Mar 7, 2018 at 7:31

SF..MJ

8811 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to loop over an array in datatable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related