Nested json datatable

Webix JS
#1

Hello,

I have some trouble figuring out how to select deep data from a nested data source.
Here’s my code :

var list_interveners = webix.ui({
    view:"list",
    container:"list_interveners",
    select:true,
    url:"http://local/users/list",
    template:"#lastName# #firstName#",
    on: {
        "onItemClick":function(id){
            linked_set  = new webix.DataCollection({
                url: "http://local/users/user/" + id
            });
            list_contacts.parse(linked_set);
        }
    }
});

var list_contacts = webix.ui({
    container:"contact_datatable",
    view:"datatable",
    columns:[
        {
            id:"number",
            header:"number",
            template:"#phones#"
        },
    ],
    autoheight:true,
    autowidth:true
});


list_contacts.bind(list_interveners, function(slave, master){
    if (!master) return false;
    return master.id == slave.id;
});

And here’s the JSON :

{
“url”:“http:\/\/local\/images\/avatar\/”,
“data”:{
“id”:2,
“avatar”:“default.jpg”,
“title”:“Mr”,
“first_name”:“testWebix”,
“last_name”:“webixTest”,
“function”:“Company”,
“language”:“english”,
“phones”:{
“1”:{
“id”:1,
“type”:“office”,
“number”:"+32 1 234 56 78",
“country”:{
“id”:21,
“iso”:“BE”,
“iso3”:“BEL”,
“name”:“BELGIUM”,
“nice_name”:“Belgium”,
“phone_code”:32
},
“note”:null
},
“2”:{
“id”:2,
“type”:“fax”,
“number”:"+32 1 234 56 79",
“country”:{
“id”:21,
“iso”:“BE”,
“iso3”:“BEL”,
“name”:“BELGIUM”,
“nice_name”:“Belgium”,
“phone_code”:32
},
“note”:null
},
“3”:{
“id”:3,
“type”:“private”,
“number”:"+32 2 345 67 89",
“country”:{
“id”:21,
“iso”:“BE”,
“iso3”:“BEL”,
“name”:“BELGIUM”,
“nice_name”:“Belgium”,
“phone_code”:32
},
“note”:null
},
},
}
}

How can I have the datatable displaying each phone number as a row ?
What is displayed is “[object Object]”, and I saw nowhere how to display this nested json properly.

Thanks for the help.

#2

It will be very easy if “phone” was an array of data, not a hash.

For hash of data you will need to have a code that will convert it to an array

Check the next snippet http://webix.com/snippet/f6d8de7e

1 Like
#3

Please advice, how to add data into nested data source by clicking on Add button to insert empty row into nested table, insert values and synchronize with master table? Any other solution will be also acceptable. And how to delete data from nested table, row can not be selected for deletion (getSelectedId() is undefined)

#4

Each table is a separate instance of datatable, so it has all the same API.
You can enable selection for the second table and use normal CRUD API for data operations

In your case, as data is loaded from the master table, it must be changed in the master table as well. Please check the updated snippet

http://webix.com/snippet/470cb515