One-to-Many Relationships in separate JSON feeds

87 views
Skip to first unread message

Nik_G @OpenHalton

unread,
May 27, 2011, 4:08:40 PM5/27/11
to SIMILE Widgets
I'm going around in circles and going mad at the same time -- trying
to understand how to express one to many relationships in EXHIBIT
using 3 separate tables / JSON feed(s) as source.

here's the set-up: I am working with items: Parks, Facilities &
Washrooms
a Park: can have 1....n Facilities
a Park: can have 1....n Washrooms

I'd like to keep the feed structure similar to the one below (vs.
"nesting" subsets of items under 1 item) because that's how the source
data arrives. The relationships are currently expressed as:
Facilities.ParkID <--> Parks.ID and Washrooms.ParkID <--> Parks.ID
where Parks.ID is the "key"

The purpose of the Exhibit is to show view of Parks (with lists of
facilities, washrooms for each) that would update based on filters
from all 3 item types.

Here's my feed: http://www.editgrid.com/user/nikg/ParkTest.exhibit.jsonp

editgridCallback({"items":[
{"type":"Park","id":"1","label":"Arbutus Village
Park","Neighbourhood":"Arbutus
Ridge","Facilities":"Y","SpecialFeatures":"N","Washrooms":"N"},
{"type":"Park","id":"2","label":"Carnarvon
Park","Neighbourhood":"Downtown","Facilities":"Y","SpecialFeatures":"N","Washrooms":"Y"},
{"type":"Park","id":"6","label":"Quilchena Park","Neighbourhood":"West
End","Facilities":"Y","SpecialFeatures":"Y","Washrooms":"Y"},
{"type":"Facility","ParkID":"1","FacilityCount":"1","FacilityType":"Playgrounds","label":"Park
ID1 Playgrounds"},
{"type":"Facility","ParkID":"2","FacilityCount":"1","FacilityType":"Field
Houses","label":"Park ID2 Field Houses"},
{"type":"Facility","ParkID":"2","FacilityCount":"2","FacilityType":"Playgrounds","label":"Park
ID2 Playgrounds"},
{"type":"Facility","ParkID":"6","FacilityCount":"4","FacilityType":"Softball","label":"Park
ID6 Softball"},
{"type":"Washroom","ParkID":"1","Location":"West side, field
house","SummerHours":"Dawn to Dusk","WinterHours":"Dawn to
Dusk","label":"Park ID1 Washroom at West side, field house"},
{"type":"Washroom","ParkID":"2","Location":"North east corner,
fieldhouse","Notes":"Caretaker on site","SummerHours":"Dawn to
Dusk","WinterHours":"Dawn to Dusk","label":"Park ID2 Washroom at North
east corner, fieldhouse"},
{"type":"Washroom","ParkID":"2","Location":"North side,
fieldhouse","Notes":"Caretaker on site","SummerHours":"Dawn to
Dusk","WinterHours":"Dawn to Dusk","label":"Park ID2 Washroom at North
side, fieldhouse"},
{"type":"Washroom","ParkID":"6","Location":"South side,
fieldhouse","SummerHours":"12:00 pm - 4:00 pm","WinterHours":"12:00 pm
- 4:00 pm","label":"Park ID6 Washroom at South side, fieldhouse"},
{"type":"Washroom","ParkID":"6","Location":"West
side","SummerHours":"10:00 am - Dusk","WinterHours":"10:00 am -
Dusk","label":"Park ID6 Washroom at West side"}
]})

So, Park id 2 / label "Carnarvon Park" has 2 facilities: Field Houses,
count of 1 and Playgrounds, count of 2 as well as 2 Washrooms.

The intended behaviour is to filter parks based on selection of facets
on the right (e.g. Clicking on Playgrounds under "FacilityType" facet
should filter our parks, leaving only parks 1 and 2).

Here's the HTML:

<html>
<head>
<title>Vancouver Parks Exhibit | BETA</title>
<script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-
api.js"
type="text/javascript"></script>
<link href="parktestschema.js" type="application/json" rel="exhibit/
data" />
<link rel="exhibit/data" type="application/jsonp"
ex:converter="convert"
href="http://www.editgrid.com/user/nikg/
ParkTest.exhibit.jsonp"
jsonp-callback="editgridCallback" />
</head>
<body>
<div ex:role="collection" id="Park-collection" ex:itemTypes="Park"></
div>
<div ex:role="collection" id="Facility-collection"
ex:itemTypes="Facility"></div>
<div ex:role="collection" id="Washroom-collection"
ex:itemTypes="Washroom"></div>
<h1>Vancouver Parks Exhibit</h1>
<table width="100%">
<tr valign="top">
<td ex:role="viewPanel">
<div ex:role="view"
ex:collectionID="Park-collection"
ex:showAll="false"
ex:grouped="false"
ex:orders=".label, .NeighbourhoodName"
ex:directions="descending"
ex:possibleOrders=".label, .NeighbourhoodName"
></div>
</td>
<td width="25%">
<div ex:role="facet"
ex:facetClass="TextSearch"
ex:facetLabel="Search Parks:"
ex:collectionID="Park-collection"
></div>
<br />
<div ex:role="facet"
ex:expression=".NeighbourhoodName" ex:facetLabel="Neighbourhood:"
ex:collectionID="Park-collection"></div>
<div ex:role="facet" ex:expression=".Facilities"
ex:facetLabel="Has Facilities?" ex:collectionID="Park-collection"></
div>
<div ex:role="facet" ex:expression=".FacilityType"
ex:facetLabel="Facilities:" ex:collectionID="Facility-collection"></
div>
<div ex:role="facet" ex:expression=".SummerHours"
ex:facetLabel="Washroom Hours:" ex:collectionID="Washroom-
collection"></div>
</div>
</td>
</tr>
</table>
</body>
</html>


Help anyone?

Nik_G @OpenHalton

unread,
May 30, 2011, 8:09:48 AM5/30/11
to SIMILE Widgets
At least -- does anyone know any examples of Exhibits that pull data
from several different sources and establish the relationship between
items via ID fields?
All of the examples I've seen take:
(A) "list sub-items within an item" approach: {items:[{type:Book,
label:Book1, author:[Author1, Author2,...n]},{...}]} vs.
(B) "relationships using ID fields" approach: {items:[{type:Book,
label:Book1},{type:Author, book:Book1, label:Author1}, {type:Author,
book:Book1, label:Author2},{...}]}

Is it because Exhibit CANNOT support scenario (B)??


On May 27, 4:08 pm, "Nik_G @OpenHalton" <openhal...@gmail.com> wrote:
> I'm going around in circles and going mad at the same time -- trying
> to understand how to express one to many relationships in EXHIBIT
> using 3 separate tables / JSON feed(s) as source.
>
> here's the set-up: I am working with items: Parks, Facilities &
> Washrooms
> a Park: can have  1....n Facilities
> a Park: can have  1....n Washrooms
>
> I'd like to keep the feed structure similar to the one below (vs.
> "nesting" subsets of items under 1 item) because that's how the source
> data arrives. The relationships are currently expressed as:
>  Facilities.ParkID <--> Parks.ID  and Washrooms.ParkID <--> Parks.ID
> where Parks.ID is the "key"
>
> The purpose of the Exhibit is to show view of Parks (with lists of
> facilities, washrooms for each) that would update based on filters
> from all 3 item types.
>
> Here's my feed:http://www.editgrid.com/user/nikg/ParkTest.exhibit.jsonp
>
> editgridCallback({"items":[
> {"type":"Park","id":"1","label":"Arbutus Village
> Park","Neighbourhood":"Arbutus
> Ridge","Facilities":"Y","SpecialFeatures":"N","Washrooms":"N"},
> {"type":"Park","id":"2","label":"Carnarvon
> Park","Neighbourhood":"Downtown","Facilities":"Y","SpecialFeatures":"N","Wa shrooms":"Y"},
> {"type":"Park","id":"6","label":"Quilchena Park","Neighbourhood":"West
> End","Facilities":"Y","SpecialFeatures":"Y","Washrooms":"Y"},
> {"type":"Facility","ParkID":"1","FacilityCount":"1","FacilityType":"Playgro unds","label":"Park
> ID1 Playgrounds"},
> {"type":"Facility","ParkID":"2","FacilityCount":"1","FacilityType":"Field
> Houses","label":"Park ID2 Field Houses"},
> {"type":"Facility","ParkID":"2","FacilityCount":"2","FacilityType":"Playgro unds","label":"Park
> ID2 Playgrounds"},
> {"type":"Facility","ParkID":"6","FacilityCount":"4","FacilityType":"Softbal l","label":"Park

mleden

unread,
May 31, 2011, 11:33:29 AM5/31/11
to SIMILE Widgets
Hi Nik,

It took me a little while to wrap my head around Exhibit's paradigm
for related data. In the end, I concluded that, in order to use out-
of-the-box Exhibit functionality such as facets, you will need to
"nest" the JSON data. So, in your case, I think you will need to
include the Facility & Washroom data in your Park "data file" (if you
want to implement Exhibit's default facet functionality). It looks
like you have already figured out the JSON syntax for that.
Obviously, that does not preclude the data model that you noted.

In some of my sites, where Exhibit view & facet functionality is not
critical, I iterate over a result set to render a "listing". With
this type of approach, I *DO* sometimes use independent JSON data
files for each database table and/or view.

HTH,
-Mark

Nik_G @OpenHalton

unread,
May 31, 2011, 7:34:46 PM5/31/11
to SIMILE Widgets
Thanks Mark,

I actually, think I may have figured it out... This is how the JSONP
needs to be represented (example below).

where id:1 within "table1" and then a field from another table that
references this id (example facilityat:1 or washroomat:1 from table
"washroom")

Then in the code it's <div ex:role="exhibit-collection"
ex:itemTypes="Park"></div> after body, and then in the TabularView,
the columns/fields referenced as:
!facilityat or !washroomat
and referencing fields from within those "subtables" by using !
facilityat.FacilityURL, or as part of a foreach loop, together with
some other functions like this:
foreach(!facilityat, if(exists(.FacilityURL), concat('<a
href=',.FacilityURL,'>',.name,'</a> (',.FacilityCount,')') ,
concat(.name,' (',.FacilityCount,')')))

The facets are like this:
<div ex:role="facet" ex:expression="!facilityat.name"
ex:showmissing="false" ex:scroll="true" ex:facetLabel="Facilities:"></
div>
<div ex:role="facet" ex:expression="!washroomat.SummerHours"
ex:showmissing="false" ex:scroll="true" ex:facetLabel="Washroom
Hours:"></div>

JSONP example:

editgridCallback({"items":[
{"type":"Park","id":"1","label":"Arbutus Village
Park","Neighbourhood":"Arbutus
Ridge","Facilities":"Y","SpecialFeatures":"N","Washrooms":"N"},
{"type":"Park","id":"2","label":"Carnarvon
Park","Neighbourhood":"Downtown","Facilities":"Y","SpecialFeatures":"N","Washrooms":"Y"},
{"type":"Park","id":"6","label":"Quilchena Park","Neighbourhood":"West
End","Facilities":"Y","SpecialFeatures":"Y","Washrooms":"Y"},
{"type":"Park","id":"1023","label":"Some
Park","Neighbourhood":"Wherever","Facilities":"N","SpecialFeatures":"N","Washrooms":"Y"},
{"type":"Facility","facilityat":"1","FacilityCount":"1","name":"Playgrounds","label":"Park
ID1 Playgrounds","FacilityInfo":"Playgrounds (1)"},
{"type":"Facility","facilityat":"2","FacilityCount":"1","name":"Dogs
Off-Leash Areas","label":"Park ID2 Dogs Off-Leash
Areas","FacilityInfo":"Dogs Off-Leash Areas (1)","FacilityURL":"http://
vancouver.ca/parks/info/dogparks/index.htm"},
{"type":"Facility","facilityat":"2","FacilityCount":"2","name":"Playgrounds","label":"Park
ID2 Playgrounds","FacilityInfo":"Playgrounds (2)"},
{"type":"Facility","facilityat":"6","FacilityCount":"4","name":"Softball","label":"Park
ID6 Softball","FacilityInfo":"Softball (4)"},
{"type":"Facility","facilityat":"2","FacilityCount":"88","name":"SomethingElse","label":"Park
ID2 SomethingElse","FacilityInfo":"SomethingElse (88)"},
{"type":"Washroom","washroomat":"1023","label":"West side 1023, field
house","SummerHours":"Dawn to Dusk","WinterHours":"Dawn to
Dusk","Description":"Park ID1023 Washroom at West side 1023, field
house"},
{"type":"Washroom","washroomat":"2","label":"North east corner 2,
fieldhouse","Notes":"Caretaker on site","SummerHours":"Dawn to
Dusk","WinterHours":"Dawn to Dusk","Description":"Park ID2 Washroom at
North east corner 2, fieldhouse"},
{"type":"Washroom","washroomat":"2","label":"North side 2,
fieldhouse","Notes":"Caretaker on site","SummerHours":"Dawn to
Dusk","WinterHours":"Dawn to Dusk","Description":"Park ID2 Washroom at
North side 2, fieldhouse"},
{"type":"Washroom","washroomat":"6","label":"South side 6,
fieldhouse","SummerHours":"12:00 pm - 4:00 pm","WinterHours":"12:00 pm
- 4:00 pm","Description":"Park ID6 Washroom at South side 6,
fieldhouse"},
{"type":"Washroom","washroomat":"6","label":"West side
6","SummerHours":"10:00 am - Dusk","WinterHours":"10:00 am -
Dusk","Description":"Park ID6 Washroom at West side 6"}
]})
Reply all
Reply to author
Forward
0 new messages