Use this JavaScript programming example for loading from a JSON data source to DataTree. The code sample gives you four different ways of doing it: plain JSON data (based on objects); mixed JSON data (using strings instead of objects); applying a custom JSON format; loading from a file. Feel free to use our code samples or a snippet tool below to create your own web apps.
/* The sample demonstrates different ways you can load JSON data to the Tree: 1) Plain JSON data (1st tree) and mixed JSON data (string instead of objects; 2nd tree) 2) Custom JSON (3rd tree) and loading from a file (4th tree) */ var myjson = webix.DataDriver.myjson = webix.copy(webix.DataDriver.json); myjson.child=function(obj){ if (obj.$level == 1) return obj.parts; if (obj.$level == 2) return obj.pages; }; webix.ui({ rows:[ {cols:[ { //plain json data, based on objects view:"tree", activeTitle:true, data: [ { id:"1", open:true, value:"The Shawshank Redemption", data:[ { id:"1.1", value:"Part 1" }, { id:"1.2", value:"Part 2" }, { id:"1.3", value:"Part 3" } ]}, { id:"2", value:"The Godfather", data:[ { id:"2.1", value:"Part 1" }, { id:"2.2", value:"Part 2" } ]} ] }, { //mixed json data, using strings instead of objects view:"tree", data: [ { id:"1", open:true, value:"The Shawshank Redemption", data:[ { id:"1.1", value:"Part 1" }, { id:"1.2", value:"Part 2" }, { id:"1.3", value:"Part 3" } ]}, { id:"2", value:"The Godfather", data:[ { id:"2.1", value:"Part 1" }, { id:"2.2", value:"Part 2" } ]} ] } ]}, {cols:[ { //custom json format view:"tree", data: [ { id:"1", value:"The Shawshank Redemption", open:true, parts:[ { id:"1.1", value:"Part 1" }, { id:"1.2", value:"Part 2", open:true, pages:[ "page 1", "page 2" ]}, { id:"1.3", value:"Part 3" } ]}, { id:"2", value:"The Godfather", parts:[ { id:"2.1", value:"Part 1" }, { id:"2.2", value:"Part 2" } ]} ], datatype:"myjson" }, { //loading from file view:"tree", url:"//docs.webix.com/samples/17_datatree/01_loading/data/data.json" } ]}, ] });