Tabulator: Complex JSON Object?

Created on 15 Mar 2017  路  2Comments  路  Source: olifolkerd/tabulator

Hi there -- LOVE this project. It's incredible!

I apologize if this has already been answered -- (I exhausted my search-fu before turning here.)
Can you tell me if there is support for complex JSON Objects, and if so how to reference nested values? For instance, by JSON looks like this:

{
    "Name": "Fred Jones",
    "Extension": "101",
    "AllProperties": {
        "UserID": "FJONES",
        "Office": "IT-110"
    }
}

While I can access the "Name" and "Extension" attributes by normal convention, I'm not able to determine how, (if possible), to access the items nested under "AllProperties", such as "UserID". Below is just one of many attempts at reaching for the nested item.

    columns:[
        {title:"URL", field:"Name", sorter:"string"},
        {title:"Title", field:"Extension", sorter:"string"},
        {title:"Litigation Manager", field:"AllProperties.UserID", sorter:"string"}
    ]

Any help you can offer would be much appreciated!! Thanks!

Most helpful comment

Oli, thank you very much for your help on this. Although it took me a few tries, I did get this solution to work. I must confess, that I after a bit more digging, I did find that someone had posted a similar question to mine. This confirms my thought about the need for a flat structure. The function you offered there will serve my needs pretty well also. Thank you very much for your assistance with this!

All 2 comments

Hey,

Thanks for getting in touch,

There is not a direct way to do it, but you can use some formatter trickery if it is for display purposes only.

You can make up a field name not in the data, in this case we will call it fake and then use a custom formatter to show the value of the nested object:

$("#example-table").tabulator({
    columns:[
        {title:"URL", field:"Name", sorter:"string"},
        {title:"Title", field:"Extension", sorter:"string"},
        {title:"Litigation Manager", field:"fake", sorter:"string", formatter:function(value, data, cell, row, options){
            return data.AllProperties.UserID;
        }}
    ]
});

if you need get changes to this value out from the table with the getData method then let me know, as this is possible too, but it requires a more complex solution involving accessors and mutators.

Let me know if that helps

Cheers

Oli

Oli, thank you very much for your help on this. Although it took me a few tries, I did get this solution to work. I must confess, that I after a bit more digging, I did find that someone had posted a similar question to mine. This confirms my thought about the need for a flat structure. The function you offered there will serve my needs pretty well also. Thank you very much for your assistance with this!

Was this page helpful?
0 / 5 - 0 ratings