Tree: JSON Dataset, programming examples of loading from a JSON data source to DataTree

Tree: JSON Dataset, programming examples of loading from a JSON data source to DataTree

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.

JS Code

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;
};

var tpl = "<strong>Loading from a JSON data source</strong>"+"<br><br>" +
     "The sample demonstrates different ways you can load JSON data to DataTree:"+"<br><br>" +
     "1. Plain JSON data (based on objects)<br> "+
     "2. Mixed JSON data (using strings instead of objects)<br> "+
     "3. Applying a custom JSON format<br>" +
     "4. Loading from a file<br>";

webix.ui({
  rows:[
    {template:tpl, height:170},
    {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"
      }
    ]},              
  ]
});