Get DataTables to output an array of objects in appropriate columns

Question

I'm working on a chemicals database web application. Using DataTables 1.10.16 and CakePHP 3.5

Cake is producing a JSON feed. A sample is below:

[
{
    "id": 1,
    "app_id": "ID000001",
    "name": "Chromium",
    "ecs": [
        {
            "id": 1,
            "value": "123-456-7"
        },
        {
            "id": 32,
            "value": "222-333-444"
        },
    ],
    "cas": [
        {
            "id": 1,
            "value": "987-654-3"
        }
    ]
},

]

For certain chemicals there are multiple EC (ecs in the JSON) and CAS Numbers (cas in the JSON).

I don't know if/how it's possible to get DataTables to loop through these objects, outputting them in the appropriate columns, with a separator such as a <br> tag.

My table markup looks like this:

<table id="substancesTable" class="table responsive display table-striped" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Application ID</th>
            <th>EC Number</th>
            <th>CAS Number</th>
            <th>Chemical Name</th>
        </tr>
     </thead>
 </table>

And in my Javascript I'm doing this:

$('#substancesTable').DataTable({
    "processing": true,
    "serverSide": true,
    "searching": false,
    "ajax": { 
        "url" : "/get-substances.json",
        "method" : "POST",
        "dataSrc":""
    },
    "columns": [
        { "data": "app_id", "name" : "app_id" },
        { "data": "ecs", "name" : "ec_number" },
        { "data": "cas", "name" : "cas_number" },
        { "data": "name", "name" : "name" },
    ]
});

This works in terms of populating the "Application ID" and "Chemical Name" columns - but that's because there is a simple 1:1 mapping in the JSON (no arrays/objects).

The output for the "EC Number" and "CAS Number" columns is just [object Object] and is repeated the number of objects there are. In the example above there are 2 EC Numbers for this chemical so the output under "EC Number" is [object Object],[object Object]

Can anyone assist with this? I'd like the output to be generated by looping through my JSON and introducing a break between each item, e.g.

123-456-7<br>222-333-444

annoyingmouse · Accepted Answer · 2018-03-14 18:15:12Z

1

You'll be needing a render function like this:

{
  "data": "ecs",
  "name": "ec_number",
  "title":"EC Number",
  "render": function(d,t,r){
    return d.map(function(e) {
        return e.value;
    }).join("<br/>");
  }
}

Working JSFiddle here.

answered Mar 14, 2018 at 18:15

annoyingmouse

5,6991 gold badge31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get DataTables to output an array of objects in appropriate columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related