Dojo Data makes it possible to quickly create web application interfaces and then easily plug-in any data source. It provides an abstraction layer between the user interface and the underlying data source. This allows the user interface developer to focus on the UI without having to worry about database drivers, service endpoints, and unique data formats.

In this example, we will populate a dojox.grid.DataGrid with a JsonRestStore. Then, we’ll replace the JsonRestStore with an XmlStore to show the flexibility of decoupling the UI and your data source.

The data is represented in this JSON-like format:

dataItems = [
    { "id": "AF", "name":"Africa", "type":"continent", 
      "population":"900 million", "area": "30,221,532 sq km" },
    { "id": "AS", "name":"Asia", "type":"continent", 
      "population":"1 billion", "area": "25,428,192 sq km" },
    { "id": "OC", "name":"Oceania", "type":"continent", 
      "population":"21 million", "area": "15,928,294 sq km" },
    { "id": "EU", "name":"Europe", "type":"continent", 
      "population":"56 million", "area": "25,928,294 sq km" },
    { "id": "NA", "name":"North America", "type":"continent", 
      "population":"100 million", "area": "90,928,294 sq km" },
    { "id": "SA", "name":"South America", "type":"continent", 
      "population":"102 million", "area": "78,928,294 sq km" },
    { "id": "AN", "name":"Antarctica", "type":"continent", 
      "population":"998", "area": "102,928,294 sq km" }
];

Tip: You may validate your JSON at jsonlint.org.

JsonRestStore interfaces with a data service. For this example we’ll create a mock service. Notice “query” is a parameter but for simplicity, we are ignoring it and just returning all data items regardless of the query.

var mockService = function(query){
	var d = new dojo.Deferred();
	d.fullLength = dataItems.length;
	d.callback(dataItems);
	return d;
};

Next, we’ll create the JsonRestStore, giving it a service function and target URL. Again, for this example we’ll ignore the “target” parameter. It is important when later developing with real RESTful services, but not for this simple example.

jsonStore = new dojox.data.JsonRestStore({
	service: mockService,
	target: '/some/url'
});

JsonRestStore is well-suited for larger data sets where you don’t want to (or can’t) efficiently transfer the entire data set to the client. JsonRestStore does great server-side interaction.

Finally, let’s declare a dojox.grid.DataGrid where we’ll display the data:

Name Population Area

datagrid

We can also use the same JsonRestStore to populate a dijit.form.ComboBox:


combobox

It’s that easy to put the same data into different UI widgets!

Next, we’ll switch out the JsonRestStore for an XmlStore to show how easy it is to change data formats. The data file:


	
		Africa
		900 million
		30,221,532 sq km
	
	
		Asia
		1 billion
		25,428,192 sq km
	
	
		Oceania
		21 million
		15,928,294 sq km
	
	
		Europe
		56 million
		25,928,294 sq km
	
	
		North America
		100 million
		90,928,294 sq km
	
	
		South America
		102 million
		78,928,294 sq km
	
	
		Antarctica
		998
		102,928,294 sq km
	

Then, we create the XML data store;

xmlStore = new dojox.data.XmlStore({
	url: 'continents.xml',
	label: 'name'
});

XmlStore is an “in-memory” store for reading XML data sources. It is provided by Dojo and is contained in the DojoX project. XmlStore is a read and write interface to basic XML data, a common data interchange format. The XmlStore is quite useful in that it can work with fairly generic XML documents. The store is designed so that you can override certain functions to get specific custom behaviors to occur when performing reads and saves.

Finally, plug it into the DataGrid.

Name Population Area

Also, update the ComboBox:


Both the Grid and ComboBox continue to work without any code changes to them. The only change needed was to declare the data source and specify it as the input to the grid. There were no issues with retrieving, parsing, and managing the data. The data store API did all the work!

There are many additional ready-to-use data stores, including CsvStore, FileStore, FlickrStore, JsonQueryRestStore, PersevereStore, ServiceStore, WikipediaStore, and more! See the dojox.data directory for a complete listing.

Dojo Data is a powerful, flexible tool. Data stores make it possible to fairly easily switch out both front-end components and back-end implementations without having to change much code. It can be just as easy to switch an existing Dijit with a new one, using the same data store. Multiple Dijits, charts, and grids on a page may also be powered by the same data store instance.

Additional related resources: