Normally the data in a javascript grid is in the following format:
[row1, row2, row3, ...]where row is a plain object having key: value pairs and value is a scalar variable.
row = {key1: value1, key2: value2, ...}
But sometimes developers have to deal with nested values in a row such as
row = {key1: {foo: {bar: value1}}, key2: value2, ...}
where value is buried inside one or many levels of objects.
In this example, revenues column values are one level nested while profits column values are two level nested.
{
rank: 1, company: 'Exxon Mobil',
foo: {
revenues: 339938.0,
bar: { profits: 36130.0 }
}
},
makes it quite easy to work with nested values by using rowTemplate option.
This effectively maps scalar variables to values nested inside multiple level of objects. Henceforth, developers can treat the data as plain formatted data and access the values same as scalar variables anywhere in the code.
rowTemplate: {
get revenues() {
return this.foo.revenues;
},
set revenues(val) {
this.foo.revenues = val;
},
get profits() {
return this.foo.bar.profits;
},
set profits(val) {
this.foo.bar.profits = val;
}
},
Furthermore if some rows may have undefined values, then following check can be added while doing the mapping with rowTemplate option.
rowTemplate: {
get revenues() {
this.foo = this.foo || {};
return this.foo.revenues;
},
set revenues(val) {
this.foo = this.foo || {};
this.foo.revenues = val;
},
get profits() {
this.foo = this.foo || {};
this.foo.bar = this.foo.bar || {};
return this.foo.bar.profits;
},
set profits(val) {
this.foo = this.foo || {};
this.foo.bar = this.foo.bar || {};
this.foo.bar.profits = val;
}
},