Example - Data Picker
The Data Picker content display is for displaying information about a single item, not a list. It can be paired with any content source and content transform that combine to return an array of data and used to pick out elements of data from that array.
In Detail
By now you may be getting a bit tired of NASA or RSS data, so for a change the source this time is a JSON lookup of an IP record. http://ip-api.com/json/140.82.112.3, an IP service that returns a JSON record for an IP address.
The content transform is then Table from JSON with the flatten option 'Flatten with.dot.notation all the way'.
Rather than go straight to the display, it is again useful to first have a quick look at the data available using the Serialize content display or the Preview button on the display tab to review the incoming data to the display. This is generally a useful intermediary stage when viewing complex data and becomes essential with Data Picker because we need to know the keys to pick from.
Array
(
[status] => success
[country] => United States
[countryCode] => US
[region] => CA
[regionName] => California
[city] => San Francisco
[zip] => 94107
[lat] => 37.7823
[lon] => -122.391
[timezone] => America/Los_Angeles
[isp] => GitHub, Inc.
[org] => GitHub, Inc.
[as] => AS36459 GitHub, Inc.
[query] => 140.82.112.3
)
Looking at the data we make note of the keys:
- org
- query (the ip address)
- city
- regionName
- zip
- latitude
- longitude
We can then use those keys to pick out the data in Data Picker.
As with List Picker, Data Picker can assign an item as a link behind another item, so rather than just having the full URL text as a link, we can link to it directly from the title and from the image.
Within Data Picker, every picked item can be individually formatted and text elements inserted to use as headings, such as the Latitude and Longitude headings below.
It is worth pointing out that not every IP address will actually work as a URL. It all depends on how the IP is configured. Fortunately GitHub's IP address does link nicely to GitHub, so our example source is a little contrived.
The same technique can be used for more complex sources and is especially useful for displaying and formatting data that follows a non-trivial pattern.
