Menu
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
344
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>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;
}
}
]
});
answered Apr 09 '26 15:04
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With