Specify paths and subpaths

You can specify paths to the data in the data source, or for more specific acquisition of data, you can specify a subpath.

Specify a path

When you create a JSON data set, you can specify a common path in the constructor by using the following syntax:

{path: "property.sub property"}

Note: JSON uses a dot (.) notation to specify the path to a specific point in the JSON source code. This method of specification works similar to XML and XPath, which uses a slash (/) to denote the node path.

For example, to obtain the “city” value from the following JSON source:

{
    "firstName": "Jason",
    "lastName": "Jones",
    "address": {
        "city": "San Francisco, CA",
        "zip": 94121,
        "address": "444 Columbus Ave"
    },
    "email": [
        "jason@sf.com",
        "sjones@adobe.com"
       ]
}

set the value in the constructor as follows:

var ds1 = new Spry.Data.JSONDataSet("myfile.js", {path: "address.city"});

Specify a subpath

JSON formats often use nested structures to group data together. In the following example, the “images” and “thumbnail” properties are grouping together other pieces of subdata:

{
	"id": "0001",
	"type": "donut",
	"name": "Cake",
	"image":
		{
			"url": "images/0001.jpg",
			"width": 200,
			"height": 200
		},
	"thumbnail":
		{
			"url": "images/thumbnails/0001.jpg",
			"width": 32,
			"height": 32
		}
}

Sometimes you’ll want to flatten these pieces of subdata so that they are also available as columns in the data set. You can use the subPaths option in the constructor to tell the JSON data set to include these nested structures when it flattens the top-level JSON elements.

In the following example, no path is specified, so the JSON data set attempts to flatten only the top-level elements of the data source (“id”, “type”, “name”, “image”, and “thumbnail”). Because you also want to include the pieces of subdata from the nested “image” structure, specify the path to the data, which is simply “image”:

var dsExample6 = new Spry.Data.JSONDataSet("data/object-03.js", {subPaths: "image"});

Spry then recognizes the information within the “image” property, and pulls it to the top level of the structure, thus including the subproperty information in the data set. You can now use the subproperties as data references by prepending image. to the subproperty name, as follows:

{id}

{type}

{name}

{image.width}

{image.height}

{image.url}

Spry also supports multiple subpaths. In the preceding example, it is likely that you will want the subproperties from the “thumbnail” property as well. To add this information to the data set, specify “thumbnail” as another subpath, as follows:

var dsExample7 = new Spry.Data.JSONDataSet("../../data/json/object-03.js", { subPaths: [ "image", "thumbnail" ] });

The multiple subpaths are specified as an array of strings, delimited in square brackets ([]). The available data references are now as follows:

{id}

{type}

{name}

{image.width}

{image.height}

{image.url}

{thumbnail.width}

{thumbnail.height}

{thumbnail.url}