Spry

Create a Spry JSON data set

  1. Open a new or existing HTML page.
  2. Make sure that you’ve linked the Spry data library files to the page. For more information, see Prepare your files.
  3. Locate the JSON source for the data set.

    For example, you might want to use the JSON code in a file called object-02.js. The file might be located in a folder called data in the site’s root folder:

    data/object-02.js

    You could also specify a URL to the HTML file, as follows:

    http://www.somesite.com/somefolder/object-02.js

    Note: The URL you decide to use (whether absolute or relative) is subject to the browser’s security model, which means that you can only load data from an HTML source that is on the same server domain as the HTML page you’re linking from. You can avoid this limitation by providing a cross-domain service script. For more information, consult your server administrator.
  4. To create the data set, insert the following script block after the script tags that import the library:
    <script type="text/javascript">
    	var datasetName = new Spry.Data.JSONDataSet("sourcefile", {path:"datapath"});
    </script>

    A completed statement might look as follows:

    var ds1 = new Spry.Data.HTMLDataSet("data/object-02.js", {path:"batters.batter"});

    The statement creates a new data set called ds1 that retrieves data from the batters.batter property in the specified JavaScript file.

    You can also specify a URL as the source of the data, as follows:

    var dsSpecials = new Spry.Data.JSONDataSet("http://www.somesite.com/somefolder/object-02.js", {path:"batters.batter"});

    The completed example code might look as follows:

    <head>
    ...
    <script type="text/javascript" src="includes/SpryJSONDataSet.js"></script>
    <script type="text/javascript" src="includes/SpryData.js"></script>
    <script type="text/javascript">
    	var ds1 = new Spry.Data.JSONDataSet("data/object-02.js", {path:"batters.batter"});
    </script>
    ...
    </head>

After you’ve created the data set, create a dynamic region so that you can display the data.