NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

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

Tree: JSON Dataset

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

/*
  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"
      }
    ]},              
  ]
});