Spry

Spry JSON data set basic overview

The Spry JSON data set lets you use JSON as a data source. JSON data sets work the same way as XML data sets, which create a kind of holding container, or table, when you create the data set. The advantages of using JSON as a data source include generating smaller file sizes, ease of use, and the ability to work with complex, nested structures.

Optional sorting, caching, distinct, and load interval parameters used with XML data sets also work in a similar way with JSON data sets.

The following example shows a page (object-02.js from the Spry zip file data folder), that contains the JSON code that this discussion uses as a sample data source:

{
	"id": "0001",
	"type": "donut",
	"name": "Cake",
	"ppu": 0.55,
	"batters":
		{
			"batter":
				[
					{"id": "1001", "type": "Regular"},
					{"id": "1002", "type": "Chocolate"},
					{"id": "1003", "type": "Blueberry"},
					{"id": "1004", "type": "Devil's Food"}
				]
		},
	"topping":
		[
			{"id": "5001", "type": "None"},
			{"id": "5002", "type": "Glazed"},
			{"id": "5005", "type": "Sugar"},
			{"id": "5007", "type": "Powdered Sugar"},
			{"id": "5006", "type": "Chocolate with Sprinkles"},
			{"id": "5003", "type": "Chocolate"},
			{"id": "5004", "type": "Maple"}
		]
}

On the page that displays the data, a few snippets of code creates the JSON data set. The following example shows a JSON data set called ds1.

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Spry Example</title>
	<!--Link the Spry libraries-->
	<script src="SpryData.js" language="javascript" type="text/javascript"></script>
	<script src="SpryJSONDataSet.js" language="javascript" type="text/javascript"></script>
	<!--Create a data set object-->
	<script type="text/javascript">
		var ds1 = new Spry.Data.JSONDataSet("data/object-02.js", {path: "batters.batter"});
	</script>
</head>
. . .
<body>
</body>

The data set loads data from the file that contains the JSON code (object-02.js), and specifies the property in the data structure that defines the starting point of the data set.

Note: The examples in this document are for reading purposes only and not intended for execution. For working samples, see the demos folder in the Spry folder on Adobe Labs.

In the example, the first script block links the SpryData.js Spry data library, which is stored in a folder called includes on the server:

<script type="text/javascript" src="includes/SpryData.js"></script>

The second script tag links to the SpryJSONDataSet.js file, which is also stored in a folder called includes on the server. This file lets you specify JSON code as your data source:

<script type="text/javascript" src="includes/SpryJSONDataSet.js"></script>
Note: You do not need to attach the XPath.js file; it is used only for XML data sets.

The third script block contains the statement that creates the ds1 data set:

var ds1 = new Spry.Data.JSONDataSet("data/object-02.js", {path: "batters.batter"});
Note: Remember that JSON data sets are case sensitive, so it's important that you make sure that the scripts, files names, and paths you specify are capitalized (or not capitalized) appropriately.

In JavaScript the new operator is used to create objects. The Spry.Data.JSONDataSet() method is a constructor in the Spry data library that creates new JSON data set objects. The constructor requires a single argument: a path to the JSON data source (in this case, "data/object-02.js", a URL relative to the HTML file). The second argument can be used to specify any optional constructor parameters, for example the path parameter. In the above example, we’ve specified a path to a particular section of data in the data source ("batters.batter").

Each data set maintains the notion of a current row. By default, the current row is set to the first row in the data set. Later, you can change the current row programmatically by calling the setCurrentRow() method on the data set object.

Note: The data set contains no data after you've created it with the new JavaScript operator. To load data into the dataset immediately, call the data set's loadData() method, which executes a request to load the JSON data. Spry regions and detail regions do this automatically for the data sets they depend on, but if you are not using one of these regions, call the loadData() method manually in your page code. This loading is asynchronous, so the data might still be unavailable if you try to access it immediately after calling loadData().

Example

<script type="text/javascript">
	var dsSpecials = new Spry.Data.JSONDataSet (....);
	dsSpecials.loadData();
</script>