Understanding dojo.data

One of the areas in Dojo that may seem daunting on the surface is the dojo.data package. It is actually not that bad once you see a few examples that can be referenced on the Dojo Toolkit site. In this post I will use the dijit.form.FilteringSelect documentation to show how easy this stuff is. Check out the first example where you have a drop down list with a button, you select the button and a message box appears and shows the underlying value for the selection:

Click image for larger picture

You can look at the code and its pretty straightforward, but let’s go ahead and dissect it:

    dojo.addOnLoad(function() {
        var stateStore = new dojo.data.ItemFileReadStore({
            url: "../../_static/js/dijit/tests/_data/states.json"
        var filteringSelect = new dijit.form.FilteringSelect({
            id: "stateSelect",
            name: "state",
            value: "KY",
            store: stateStore,
            searchAttr: "name"

The first thing you will notice is the ItemFileReadStore with a rather long URL. You can look at the JSON using this full URL. Looking at the data will help you understand the code a little better. The combo box is initialized to Kentucky, the “value: “KY”” defines that. Notice the searchAttr defines what element in the JSON object to use for display and searching, in this case its the name attribute. Looking at the chunk of the JSON below you will see the identifier is “abbreviation”, meaning the result that is submitted or used would be the abbreviation attribute in the JSON record.

  label: "name",
  items: [
	{name:"Alabama", label:"<img width='97px' height='127px' src='images/Alabama.jpg'/>Alabama",abbreviation:"AL"},
	{name:"Alaska", label:"Alaska",abbreviation:"AK"},
	{name:"American Samoa", label:"American Samoa",abbreviation:"AS"},

So instead of some static JSON file on the server, it could very well be a servlet or PHP data-source generating the JSON.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.