Datatables with nested array

Question

I've posed a question about Bootstrap Tables but meanwhile I moved to Datatables as I was feeling blocked. My problem, however, is the same.

None of the two can easily handle nested JSON results. For instance if I choose "field: author", it processes the following as "[Object Object], [Object Object]".

    "author": [
        {
            "family": "Obama",
            "given": "Barack"
        },
        {
            "family": "Obama",
            "given": "Michelle"
        }

I can select the results individually, say "field: author[, ].family", which returns a list like "Obama, Obama". But I want an output like "given+family1, given+family2, ..".

Datatables can easily handle nested json. Maybe if you posted your datatables code someone might be able to help you. What is your question? — markpsmith
– markpsmith, Commented Jan 17, 2017 at 14:45
Gaa sorry, I pasted the wrong link! https://datatables.net/examples/ajax/deep.html — markpsmith
– markpsmith, Commented Jan 17, 2017 at 15:03
I've already been through this. You can call JSON sub-objects using "value.[position].child". What you cannot do is call all the child entities of "value". So at best I can have the output "Obama, Obama". But I want it to be "Barack Obama, Michelle Obama". — east1999
– east1999, Commented Jan 17, 2017 at 15:24

Deven Shah · Accepted Answer · 2017-01-17 16:14:35Z

3

You can use custom rendering. DataTables allows you to define custom rendering for each column.

Here is a sample that I worked out. I am doing custom rendering for Author column.

$(document).ready(function() {
var dataSet = [
    { "name": "How to DataTables", "author": [{ "firstname": "jack", lastname: "d" }, { "firstname": "dick", lastname: "j" }] },
    { "name": "How to Custom Render", "author": [{ "firstname": "bill", lastname: "g" }, { "firstname": "scott", lastname: "g" }] }
];

$('#example').DataTable({
    data: dataSet,
    columns: [
        { title:"Book Name",
          data: "name" },
        {
          title: "Authors",
            data: "author",
            render: function(data, type, row) {
                //return data.length;
                var txt = '';
                data.forEach(function(item) {
                    if (txt.length > 0) {
                      txt += ', '
                    }
                    txt += item.firstname + ' ' + item.lastname;
                });
                return txt;
            }
        }
    ]
});
});

answered Jan 17, 2017 at 16:14

Deven Shah

4323 silver badges5 bronze badges

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

3 Comments

east1999 Over a year ago

Ok this works but I don't know how to use it with a JSON file. I need to convert the JSON input to variables I can then play with and interchange.

Deven Shah Over a year ago

There are ways you can load data directly into Datatables, see this link datatables.net/examples/data_sources

east1999 Over a year ago

Solved in the Datatables forum:

"data": "author",         "render": function ( data, type, full ) {         return $.map( data, function ( d, i ) {         return d.given +' '+ d.family;         } ).join( ',<br />' );         }

Collectives™ on Stack Overflow

Datatables with nested array

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related