json data set sample
TRANSCRIPT
-
8/13/2019 JSON Data Set Sample
1/21
JSON Data Set Sample Page 1
JSON Data Set Sample
The JSON output from different Server APIs can range from simple to highly nested and complex. The examples on this page attempt to illustrate how the JSON Data
Set treats specific formats, and gives examples of the different constructor options that allow the user to tweak its behavior. See ourJSON Primerfor moreinformation.
Example 1- JSON Array with simple data types as elements. Example 2- JSON Array with objects as elements Example 3- JSON Object Example 4- The "path" constructor option. Example 5- The "path" constructor option and JSON Array with objects as elements. Example 6- The "subPaths" constructor option with a single path. Example 7- The "subPaths" constructor option with multiple paths. Example 8- "path" constructor option example. Example 9- Multiple matches for a single sub path. Example 10- Multiple matches for multiple sub paths. Example 11- The JSON Nested Data Set. Example 12- Sorting with the JSON Nested Data Set
Be sure to check out the "What's Not Supported"section.
EXAMPLE 1
If the JSON data describes an array, and each element of that array is of a basic type (number, string, boolean, or null):
[ 100, 500, 300, 200, 400 ]
the JSON DataSet will create a row for each element in the JSON array, and store its value in a column named "column0".
var dsExample1 = new Spry.Data.JSONDataSet("../../data/json/array-01.js");
...
Values from array: {column0}
Here is a live example:
http://labs.adobe.com/technologies/spry/articles/json_primer/json_primer.htmlhttp://labs.adobe.com/technologies/spry/articles/json_primer/json_primer.htmlhttp://labs.adobe.com/technologies/spry/articles/json_primer/json_primer.htmlhttp://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example1http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example1http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example2http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example2http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example3http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example3http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example4http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example4http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example5http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example5http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example6http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example6http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example7http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example7http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example8http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example8http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example11http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example11http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example12http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example12http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#NotSupportedhttp://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#NotSupportedhttp://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#NotSupportedhttp://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#NotSupportedhttp://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example12http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example11http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example8http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example7http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example6http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example5http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example4http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example3http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example2http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example1http://labs.adobe.com/technologies/spry/articles/json_primer/json_primer.html -
8/13/2019 JSON Data Set Sample
2/21
JSON Data Set Sample Page 2
Values from array: 100 500 300 200 400
EXAMPLE 2
If the JSON data describes an array, and each element of that array is an object:
[{
color: "red",value: "#f00"
},{
color: "green",value: "#0f0"
},{
color: "blue",value: "#00f"
},
{color: "cyan",value: "#0ff"
},{
color: "magenta",value: "#f0f"
},{
color: "yellow",value: "#ff0"
},{
color: "black",value: "#000"}
]
the JSON Data Set will create a row for each object in the array, and each property on the object will become a column.
var dsExample2 = new Spry.Data.JSONDataSet("../../data/json/array-02.js");
...
-
8/13/2019 JSON Data Set Sample
3/21
JSON Data Set Sample Page 3
Values from array: {color}({value})
Here's a live example:
Values from array: red(#f00) green(#0f0) blue(#00f) cyan(#0ff) magenta(#f0f) yellow(#ff0) black(#000)
EXAMPLE 3
If the JSON data describes an object:
{color: "red",
value: "#f00"}
the JSON Data Set will create a single row for the object, and each property on the object will become a column. The data set will only contain one row of data.
var dsExample3 = new Spry.Data.JSONDataSet("../../data/json/array-03.js");
...
Values from object: {color}({value})
Here is a live example:
Values from object: red(#f00)
EXAMPLE 4
-
8/13/2019 JSON Data Set Sample
4/21
-
8/13/2019 JSON Data Set Sample
5/21
JSON Data Set Sample Page 5
Regular (1001) Chocolate (1002) Blueberry (1003) Devil's Food (1004)
EXAMPLE 5
In the case where you have an array of highly nested objects:
[{
"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" }
]},{
"id": "0002","type": "donut","name": "Raised","ppu": 0.55,"batters":
{
-
8/13/2019 JSON Data Set Sample
6/21
JSON Data Set Sample Page 6
"batter":[
{ "id": "1001", "type": "Regular" }]
},"topping":
[{ "id": "5001", "type": "None" },{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },{ "id": "5003", "type": "Chocolate" },{ "id": "5004", "type": "Maple" }
]},{
"id": "0003","type": "donut","name": "Old Fashioned","ppu": 0.55,"batters":
{"batter":
[
{ "id": "1001", "type": "Regular" },{ "id": "1002", "type": "Chocolate" }
]},
"topping":[
{ "id": "5001", "type": "None" },{ "id": "5002", "type": "Glazed" },{ "id": "5003", "type": "Chocolate" },{ "id": "5004", "type": "Maple" }
]}
]
the JSON data set uses the "path" constructor option to extract the matching data out from each object in the array. Each match then becomes a row in the data set.In this example, we want the data set to select all of the "batter" objects and flatten them into rows:
var dsExample5 = new Spry.Data.JSONDataSet("../../data/json/array-03.js", { path: "batters.batter" });
...
Batters:
{type} ({id})
-
8/13/2019 JSON Data Set Sample
7/21
JSON Data Set Sample Page 7
Here's a live example:
Batters:
Regular (1001)
Chocolate (1002) Blueberry (1003) Devil's Food (1004) Regular (1001) Regular (1001) Chocolate (1002)
EXAMPLE 6
Some JSON formats use nested structures to simply group data together. An example of this would be the "image" and "thumbnail" properties in the followingexample:
{"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
}}
It is sometimes desirable to flatten these structures so they are also available as columns in the data set. You can use the "subPaths" constructor option to tell the
JSON Data Set to include these nested structures when it flattens the top-level JSON object, or the data selected by the "path" constructor option. In this particular
-
8/13/2019 JSON Data Set Sample
8/21
JSON Data Set Sample Page 8
example, because we have not specified a "path" constructor option, the JSON data set will attempt to flatten the top-level object. Since we want to also include thedata from the "image" nested structure, we specify the path to the data which is simply "image".
var dsExample6 = new Spry.Data.JSONDataSet("../../data/json/object-03.js", { subPaths: "image" });
...
idtypenameimage.widthimage.heightimage.url
{id}{type}{name}{image.width}
{image.height}{image.url}
The properties within the nested "image" structure are now accessible from within the data set. Notice that the names of the columns are all prefixed by "image.".Here's a live example:
id type name image.width image.height image.url
0001 donut Cake 200 200 images/0001.jpg
EXAMPLE 7
You can specify multiple paths in the "subPaths" constructor option. So if you wanted to include both "image" and "thumbnail" in the flattening process, you simplypass an array of strings:
-
8/13/2019 JSON Data Set Sample
9/21
JSON Data Set Sample Page 9
var dsExample7 = new Spry.Data.JSONDataSet("../../data/json/object-03.js", { subPaths: [ "image", "thumbnail" ] });
...
idtype
nameimage.widthimage.heightimage.urlthumbnail.widththumbnail.heightthumbnail.url
{id}{type}{name}{image.width}{image.height}
{image.url}{thumbnail.width}{thumbnail.height}{thumbnail.url}
Here is a live example:
id type name image.width image.height image.url thumbnail.width thumbnail.height thumbnail.url
0001 donut Cake 200 200 images/0001.jpg 32 32 images/thumbnails/0001.jpg
EXAMPLE 8
This example shows the use of the "path" constructor option to extract out the data items. This is nothing different from some of the previous examples, but we willbuild on this in the next example. An abbreviated version of the JSON data is included here for reference. You can see the full JSON data used by this examplehere.
{
http://labs.adobe.com/technologies/spry/data/json/donuts.jshttp://labs.adobe.com/technologies/spry/data/json/donuts.jshttp://labs.adobe.com/technologies/spry/data/json/donuts.jshttp://labs.adobe.com/technologies/spry/data/json/donuts.js -
8/13/2019 JSON Data Set Sample
10/21
JSON Data Set Sample Page 10
"items":{
"item":[
{"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" }
]},
...
]}
}
In this example, we are simply going to list the types of items in our JSON object. We are going to use the "path" constructor option to select out all of the "item"objects, and then display the info we get in a table:
var dsExample8 = new Spry.Data.JSONDataSet("../../data/json/donuts.js", { path: "items.item" });
...
id
-
8/13/2019 JSON Data Set Sample
11/21
JSON Data Set Sample Page 11
typename
{id}{type}{name}
Using the path "items.item" will result in a data set that has the following columns defined for each row:
ds_RowID id type name ppu
Here is a live example:
id type name
0001 donut Cake
0002 donut Raised
0003 donut Old Fashioned
0004 bar Bar
0005 twist Twist
0006 filled Filled
EXAMPLE 9
This example builds onExample 8to show what happens when you select a set of repeating structures with the "subPaths" constructor option.
{"items":
{"item":
[
{
http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example8http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example8http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example8http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example8 -
8/13/2019 JSON Data Set Sample
12/21
JSON Data Set Sample Page 12
"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" }
]},
...
]}
}
In this example, we are going to also select the "batter" objects with our "subPaths" constructor option, then display all of our data set rows in a table.
var dsExample9 = new Spry.Data.JSONDataSet("../../data/json/donuts.js", { path: "items.item", subPaths: "batters.batter" });
...
idtypenamebatter
{id}
-
8/13/2019 JSON Data Set Sample
13/21
-
8/13/2019 JSON Data Set Sample
14/21
JSON Data Set Sample Page 14
9{"items":
{"item":
[{
"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" }
]},
...
]}
}
In this example, we are going to also select the "topping" objects with our "subPaths" constructor option, then display all of our data set rows in a table.
var dsExample10 = new Spry.Data.JSONDataSet("../../data/json/donuts.js", { path: "items.item", subPaths: [ "batters.batter","topping" ] });
...
-
8/13/2019 JSON Data Set Sample
15/21
JSON Data Set Sample Page 15
idtypenamebattertopping
{id}{type}
{name}{batters.batter.type}{topping.type}
Using the path "items.item" and sub paths "batters.batter" and "topping", will result in a data set that has the following columns defined for each row:
ds_RowID id type name ppu batters.batter.id batters.batter.type topping.id topping.type
Here is a live example:
id type name batter topping
0001 donut Cake Regular None
0001 donut Cake Regular Glazed
0001 donut Cake Regular Sugar
0001 donut Cake Regular Powdered Sugar
0001 donut Cake Regular Chocolate with Sprinkles
0001 donut Cake Regular Chocolate
0001 donut Cake Regular Maple
0001 donut Cake Chocolate None
0001 donut Cake Chocolate Glazed
0001 donut Cake Chocolate Sugar
0001 donut Cake Chocolate Powdered Sugar
0001 donut Cake Chocolate Chocolate with Sprinkles
0001 donut Cake Chocolate Chocolate
-
8/13/2019 JSON Data Set Sample
16/21
JSON Data Set Sample Page 16
0001 donut Cake Chocolate Maple
0001 donut Cake Blueberry None
0001 donut Cake Blueberry Glazed
0001 donut Cake Blueberry Sugar
0001 donut Cake Blueberry Powdered Sugar
0001 donut Cake Blueberry Chocolate with Sprinkles
0001 donut Cake Blueberry Chocolate
0001 donut Cake Blueberry Maple
0001 donut Cake Devil's Food None
0001 donut Cake Devil's Food Glazed
0001 donut Cake Devil's Food Sugar
0001 donut Cake Devil's Food Powdered Sugar
0001 donut Cake Devil's Food Chocolate with Sprinkles
0001 donut Cake Devil's Food Chocolate
0001 donut Cake Devil's Food Maple
0002 donut Raised Regular None
0002 donut Raised Regular Glazed
0002 donut Raised Regular Sugar
0002 donut Raised Regular Chocolate
0002 donut Raised Regular Maple
0003 donut Old Fashioned Regular None
0003 donut Old Fashioned Regular Glazed
0003 donut Old Fashioned Regular Chocolate
0003 donut Old Fashioned Regular Maple
0003 donut Old Fashioned Chocolate None
0003 donut Old Fashioned Chocolate Glazed
0003 donut Old Fashioned Chocolate Chocolate
0003 donut Old Fashioned Chocolate Maple
0004 bar Bar Regular Chocolate
0004 bar Bar Regular Maple
-
8/13/2019 JSON Data Set Sample
17/21
JSON Data Set Sample Page 17
0005 twist Twist Regular Glazed
0005 twist Twist Regular Sugar
0006 filled Filled Regular Glazed
0006 filled Filled Regular Powdered Sugar
0006 filled Filled Regular Chocolate
0006 filled Filled Regular Maple
We get even more rows than we had inExample 9because the "topping" path also selected multiple objects in some cases. So for every top-level object matched bythe "paths" constructor option, we get 'm*n' rows, where 'm' is the number of matches by the "batters.batter" sub path, and 'n' is the number of matches by the"topping" sub path.
EXAMPLE 11-NESTED JSONDATA SETS
Sometimes you want to work with nested structures, but you don't want to deal with the explosion of rows as shown inExample 10.Imagine you want to show a list ofthe different types of items, and under each item, you also want to list the different types of batters and toppings available. Doing that with the data set used
inExample 10would require some JavaScript logic embedded in spry attribute conditionals to control when things showed up. A simpler approach would be to useNestedJSONDataSets.
In this example we use the same JSON data used in Example 10,but we will use 2 nested JSON data sets to track the "batter" and "topping" data. Nested data setsare special data sets that stay in sync with the current row of their parent data set. As the current row of the parent data set changes, so does the data inside of thenested data set.
var dsExample11_Items = new Spry.Data.JSONDataSet("../../data/json/donuts.js", { path: "items.item" });var dsExample11_Batters = new Spry.Data.NestedJSONDataSet(dsExample11_Items, "batters.batter");var dsExample11_Toppings = new Spry.Data.NestedJSONDataSet(dsExample11_Items, "topping");
...
{dsExample11_Items::name}
Batters:
{dsExample11_Batters::type}
Toppings:
http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example10http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9 -
8/13/2019 JSON Data Set Sample
18/21
JSON Data Set Sample Page 18
{dsExample11_Toppings::type}
The other interesting thing about nested data sets is that if their parent data set is used in a spry:repeat or spry:repeatchildren context, any data references from thenested data set are kept in sync with whatever the current row is that is being processed by the loop.
Here is a live example.
Cakeo Batters:
Regular Chocolate Blueberry Devil's Food
o Toppings: None Glazed Sugar Powdered Sugar Chocolate with Sprinkles Chocolate Maple
Raisedo Batters:
Regularo Toppings:
None Glazed Sugar Chocolate Maple
Old Fashionedo Batters:
Regular Chocolate
o Toppings: None Glazed Chocolate Maple
Baro Batters:
-
8/13/2019 JSON Data Set Sample
19/21
JSON Data Set Sample Page 19
Regularo Toppings:
Chocolate Maple
Twisto Batters:
Regularo Toppings:
Glazed
Sugar Filled
o Batters: Regular
o Toppings: Glazed Powdered Sugar Chocolate Maple
EXAMPLE 12
Although you can use nested data sets to produce a table that looks like the one inExample 9,there's an important difference. Nested data sets can only sort andfilter within groups constrained by the parent's row it is associated with. It is easier to illustrate this with an example. In this example, we have a table that looks likethe one inExample 9on the left side, and on the right side, we have the same data presented as a set of nested lists.
var dsExample12_Items = new Spry.Data.JSONDataSet("../../data/json/donuts.js", { path: "items.item" });var dsExample12_Batters = new Spry.Data.NestedJSONDataSet(dsExample12_Items, "batters.batter");
...
idtypenamebatter
http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9http://labs.adobe.com/technologies/spry/samples/data_region/JSONDataSetSample.html#Example9 -
8/13/2019 JSON Data Set Sample
20/21
JSON Data Set Sample Page 20
{dsExample12_Items::id}{dsExample12_Items::type}{dsExample12_Items::name}{dsExample12_Batters::type}
{dsExample12_Items::name}
Batters:
{dsExample12_Batters::type}
Here's the live example:
id type name batter
0001 donut Cake Regular
0001 donut Cake Chocolate
0001 donut Cake Blueberry
0001 donut Cake Devil's Food
0002 donut Raised Regular
0003 donut Old Fashioned Regular
0003 donut Old Fashioned Chocolate
0004 bar Bar Regular
0005 twist Twist Regular
0006 filled Filled Regular
Cakeo Batters:
Regular Chocolate Blueberry Devil's Food
Raisedo Batters:
Regular Old Fashioned
o Batters: Regular Chocolate
Baro Batters:
Regular Twist
o Batters:
-
8/13/2019 JSON Data Set Sample
21/21
JSON Data Set Sample Page 21
Regular Filled
o Batters: Regular
Notice that when you sort any column associated with the parent data set, all of the rows in the table shift around, whereas when you click on the batter column, itseems as if only the data in the batter column is moving around. If you look at what happens in the list on the right as you sort, it becomes more apparent what ishappening.