Tabulator: nested data

[Knight2601]

is it possible to access values in nested data?
i have
[ { fields: { systemWorkItemType: "Feature", systemState: "New", systemReason: "New", systemTitle: "initial work item", systemBoardColumn: "New", systemBoardColumnDone: false, microsoftVSTSCommonStateChangeDate: "2016-12-07T14:02:24.24Z", microsoftVSTSCommonPriority: 2, microsoftVSTSCommonValueArea: "Business", microsoftVSTSCommonRisk: "3 - Low", weF_8107056482E145ECA07BC00173CF6A70_KanbanColumn: "New", weF_8107056482E145ECA07BC00173CF6A70_KanbanColumnDone: false, systemDescription: "a test description" }, id: 2, relations: [ ], rev: 4 } ]

im trying to add the field values into the table but neither "fields["systemState"] or fields.systemState work?
id and rev come out fine...
e.g. column
{ title: "Name", field: "fields.systemTitle", sorter: "string", sortable: true },
any ideas?

[olifolkerd]

Im afraid nested properties are not accessible as column fields, although you can use a object as a value and then use a custom formatter to render the values out in a single cell (great for cells that show a list of values etc.

In your case I would suggest you create a function to flatten the data before you input it into Tabulator, this example will flatten so you then could access data in the fields object using an underscore delimiter (eg. fields_systemTitle) :

//flatten data

function flattenData(data){
    var output = [];
    function flatternRow(row){
        var outputRow = {};
        for(var prop in row){
            if(typeof row[prop] !== "object"){
                outputRow[prop] = row[prop];
            }else{
                var flat = flattenRow(row[prop]);
                for(var flatProp in flat){
                    outputRow[prop + "_" + flatProp] = flat[flatProp];
                }
            }
        }
        return outputRow;
    }
    data.forEach(function(row){
        output.push(flatternRow(row));
    });
    return output;
}

//load data into table
$("#example-table").tabulator("setData", flattenData(data));

[Knight2601]

Hi

Yes, i had to flatten the structure of the data to a single level.

Thanks

On Thu, Dec 8, 2016 at 6:35 PM, Oli Folkerd [e-mail]
wrote:

Im afraid nested properties are not accessible as column fields, although
you can use a object as a value and then use a custom formatter to render
the values out in a single cell (great for cells that show a list of values
etc.

In your case I would suggest you create a function to flatten the data
before you input it into Tabulator, this example will flatten so you then
could access data in the fields object using an underscore delimiter (eg.
fields_systemTitle) :

//flatten data
function flattenData(data){
var output = [];

function flatternRow(row){
var outputRow = {};

  for(var prop in row){
      if(typeof row[prop] !== "object"){
          outputRow[prop] = row[prop];
      }else{
          var flat = flattenData(row[prop]);
          for(var flatProp in flat){
              outputRow[prop + "_" + flatProp] = flat[flatProp];
          }
      }
  }

  return outputRow;

}

data.forEach(function(row){
output.push(flatternRow(row));
});

return output;
}
//load data into table$("#example-table").tabulator("setData", flattenData(data));

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/olifolkerd/tabulator/issues/125#issuecomment-265817511,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AET2qhQoDxv0ihA5dXpHW7ctzpMZqj3Hks5rGE4KgaJpZM4LH9c8
.

[genius257]

But if flattened, some data could be lost for reference with events?
Example: {id:2, name:'cain', parent:{id:1, name:'adam'}}
But i admit, i have no idea how problematic it would be to implement, and how big of a percentage of users would benefit from it.

[olifolkerd]

Using the code I posted above to flatten it, that would be:

{id:2, name:'cain', parent_id:1, parent_name:'adam'},

so no dater would be lost, and it could easily be reconstituted back into a multi dimensional object by parsing for the delimiter in the property names.

It would be very difficult to build in multidimensionall field selectors as it currently stands, and would only offer benefit in a very restricted set of circumstances as there is already functional work around for it. i will stick it on the road map to look at later down the line, but im afraid i probably wont be looking to add it for a long while yet.

Thanks for your example :)

Oli

[bvisonl]

Is there a way to use this along with Ajax? without having to implement your own request through $.ajax ...

Update 1:

I decided to implement this "flattenData" in my server response, I basically created a TabulatorResponse and I made sure that that method flattens the data prior to returning it... so in my tabulator I can simply do { title: "XYZ", field: "object.abc.xyz" } and treat the column data as an "object"

[JeremyMorel]

One item to note for anyone wishing to use the function Oli has provided to "flatten" their data structure: There were two typos, which I have corrected in this version.
flatternRow should read flattenRow, and the line var flat = flattenData(row[prop]); should instead be var flat = flattenData(row[prop]);, else the function will fail at the foreach clause when it reaches the first nested object. Hopefully it saves someone a few cycles around the debugger! :)

//flatten data

function flattenData(data){
    var output = [];
    function flatternRow(row){
        var outputRow = {};
        for(var prop in row){
            if(typeof row[prop] !== "object"){
                outputRow[prop] = row[prop];
            }else{
                var flat = flattenRow(row[prop]);
                for(var flatProp in flat){
                    outputRow[prop + "_" + flatProp] = flat[flatProp];
                }
            }
        }
        return outputRow;
    }
    data.forEach(function(row){
        output.push(flatternRow(row));
    });
    return output;
}

//load data into table
$("#example-table").tabulator("setData", flattenData(data));

[olifolkerd]

Hey,

Thanks for spotting the typos there!

I have edited the original to avoid confusion, Thanks for getting involved in the conversations, always great to see the community helping eachother out :)
Cheers

Oli

[olifolkerd]

Hey,

You will be happy to hear that Tabulator 3.2 has just been released, and with it the the ability to bind columns to nested data, simply use dot notation in the field name:

{title:"age", field:"user.age"), //link column to age property inside user object

Full information can be found in the Column Definition Documentation

Cheers

Oli

[KaranMah]

Is there way to autoread nested json and make columns from them?

[jmartsch]

@KaranMah This is possible. Please look at http://tabulator.info/docs/4.4/columns#field-nesting and if you have autoColumns: true option set, it will generate the columns