Login Register

A Simple Data Source

The easiest data store is a static one, so let's begin with that. The file in the following example has the /pantry_spices.json URL:

{ identifier: 'name',
   items: [
	{ name: 'Adobo', aisle: 'Mexican' },
	{ name: 'Balsamic vinegar', aisle: 'Condiments' },
	{ name: 'Basil', aisle: 'Spices' },
	{ name: 'Bay leaf', aisle: 'Spices' },
        { name: 'Beef Bouillon Granules', aisle: 'Soup' },
...
	{ name: 'Vinegar', aisle: 'Condiments' },
	{ name: 'White cooking wine', aisle: 'Condiments' },
        { name: 'Worcestershire Sauce', aisle: 'Condiments' }]}

In this example:

  • The data source is /pantry_spices.json.
  • Each item is an ingredient, and each item has two attributes, name and aisle.
  • The name attribute is an identifier. Each ingredient has a different name to prevent confusion.

This is a simple but useful technique. Because this data source is a separate file, you can share the data among many pages. But what can you do with it? The following simple sample displays a select list of pantry items:

The class for the PantryStore, dojo.data.ItemFileReadStore, tells dojo.data to expect the data in a specific format that uses JSON structure to store the data. Our static file is in pantry_items.json so this is the URL. The target could also be a dynamic, server-run script that returns the specific data in the defined JSON format. Other widgets, like Tree and Grid, also use the dojo.data objects and URL to load data into them.

Sample does not display

The sample code near the bottom does not show up in IE 7 or Firefox 2. Viewing source shows that there should be something there.