Check documentation for the latest version of dhtmlxSuite Loading Data DHTMLX Docs

Loading Data

To load data from some external file you can use the load command:

view.load(url, datatype);

It takes the path to the file and a necessary data type as parameters. Where a data type can be: "json","xml","jsarray","csv","html".

Note that:

  • JSON and XML are the fastest for loading and the only formats which support dynamic loading.

  • Loading is asynchronous, which means you need to catch the end of loading before executing any commands against the data.

view.load(url, function(){
    alert("data is really loaded"); 
    //any operations with data can be placed here
},datatype);

If the datatype parameter is skipped, the operation will try to process the incoming data as XML.

JSON

view.load("some.json", "json");

where some.json contains a value similar to the following one:

"some.json"

[{
  "id":"1",
  "Package":"acx100-source",
  "Version":"20080210-1.1",
  "Maintainer":"Stefano Canepa"
},{
  "id":"2",
  "Package":"alien-arena-browser",
  "Version":"7.0-1",
  "Maintainer":"Debian Games Team"
},{
  "id":"3",
  "Package":"alien-arena-server",
  "Version":"7.0-1",
  "Maintainer":"Debian Games Team"
}]

The object can contain any number of properties and all of them will be available in templates.

The "id" property will be used as the ID of object. If there is no such a property, the component will create random IDs for each object.

Related sample:  Loading data from JSON file

XML

view.load("some.xml", "xml");

There aren't any requirements for incoming XML (it can be in any format), all the top level tags will be converted into objects.

"some.xml"

<data>
    <item id="1">
        <Package><![CDATA[acx100-source]]></Package>
        <Version><![CDATA[20080210-1.1]]></Version>
        <Maintainer><![CDATA[Stefano Canepa]]></Maintainer>
    </item>
    <item id="2">
        <Package><![CDATA[alien-arena-browser]]></Package>
        <Version><![CDATA[7.0-1]]></Version>
        <Maintainer><![CDATA[Debian Games Team]]></Maintainer>
    </item>
</data>

The names of the top level and the second level tags don't matter.

The attributes of the top level tags (item in the snippet above) and values of nested tags will be available as properties in the template and for scripting.

If you want to process only the tags with specific names you can change the xpath used for data collecting:

dhtmlx.dataDriver.xml.records = "/data/item"; //select only item tags

Related sample:  Loading data from xml

HTML

The processing works similar to that of XML, but will react only on <li> tags inside of the data (it makes no practical sense for loading from an url, exists just for consistence)

view.load("some.html", "html");


"some.html"

<ul>
    <li id="1" version="20080210-1.1" maintainer="Stefano Canepa">acx100-source</li>
    <li id="2" version="7.0-1" maintainer="Debian Games Team">alien-arena-browser</li>
    <li id="3" version="7.0-1" maintainer="Debian Games Team">alien-arena-server</li>
</ul>

The key-tag can be changed by using:

dhtmlx.dataDriver.md.tag = "DIV";

Related sample:  Loading from html file

CSV

Data in CSV doesn't have names for columns, so they are autonamed: the first column is accessible as "data0", the second one - as "data1", etc. IDs are auto-generated.

view.load("some.csv", "csv");


"some.csv"

"1", "acx100-source", "20080210-1.1", "Stefano Canepa"
"2", "alien-arena-browser", "7.0-1", "Debian Games Team"
"3", "alien-arena-server", "7.0-1", "Debian Games Team"

You can configure a row and a line separators as:

dhtmlx.dataDriver.csv.row = "\n";
dhtmlx.dataDriver.csv.cell= ",";

Related sample:  Loading data from CSV file

JSArray

Data in JS array doesn't have names for columns, so they are autonamed: the first column is accessible as "data0", the second as "data1" and etc. IDs are auto-generated.

view.load("some.js", "jsarray");


"some.js"

[["1", "acx100-source", "20080210-1.1", "Stefano Canepa"],
["2", "alien-arena-browser", "7.0-1", "Debian Games Team"],
["3", "alien-arena-server", "7.0-1", "Debian Games Team"]]

Related sample:  Loading data from JS array

Parsing

When the data is already available on the client side, you can use the code:

view.parse(data, datatype);

Parsing is executed in sync way, so new items are ready for operations after the command execution.

Parsing can be used with all the above mentioned data types.

XML string

view.parse(
"<data>
    <item id="1">
        <Package><![CDATA[acx100-source]]></Package>
        <Version><![CDATA[20080210-1.1]]></Version>
        <Maintainer><![CDATA[Stefano Canepa]]></Maintainer>
    </item>
</data>"
);

Related sample:  Parse data from xml string

JSON object

view.parse([{
  "id":"1",
  "Package":"acx100-source",
  "Version":"20080210-1.1",
  "Maintainer":"Stefano Canepa"
},{
  "id":"2",
  "Package":"alien-arena-browser",
  "Version":"7.0-1",
  "Maintainer":"Debian Games Team"
},{
  "id":"3",
  "Package":"alien-arena-server",
  "Version":"7.0-1",
  "Maintainer":"Debian Games Team"
}],"json");

Related sample:  Parse data from JSON object

HTML string

view.parse("id_of_html_element","html");

Related sample:  Parse HTML list

CSV string

view.parse('"1", "acx100-source", "20080210-1.1", "Stefano Canepa"
  \n"2", "alien-arena-browser", "7.0-1", "Debian Games Team"
  \n"3", "alien-arena-server", "7.0-1", "Debian Games Team"',"csv");

Related sample:  Parse from CSV string

JavaScript array

view.parse([["1", "acx100-source", "20080210-1.1", "Stefano Canepa"],
["2", "alien-arena-browser", "7.0-1", "Debian Games Team"],
["3", "alien-arena-server", "7.0-1", "Debian Games Team"]],"jsarray");

Related sample:  Parse JS array

Custom Data Types

If the above loading types are not enough, you can create a custom one.

dhtmlx.dataDriver.mytype=dhtmlx.extend({},dhtmlx.dataDriver.jsarray,{
    getDetails:function(data){
        var result = {};
        result.id = data[0];
        result.Package       = data[1];
        result.Version       = data[2];
        result.Maintainer    = data[3];   
        return result;
    }
})
view.load(url, "mytype");

Related sample:  Custom data type

Back to top