Show JSON data in a table
Map a whole JSON feed onto the board: every row a line, every field a column, every cell keeping itself up to date.
Single values are great for one KPI, but often you want a whole table on the board: a price list, a departures list, a set of readings. #JSONTABLE# reads a structured JSON feed and lays its rows and columns straight across the board, so the screen mirrors your data source.
You give it an address, which row to start at, how many rows to fill, and then one block per column: the field name, how to align it, and how many characters wide it is. The board pads anything shorter and truncates anything longer, so every column stays in line no matter what the data does.
Values refresh on the schedule you set, as often as every second, and the same feed can drive colour, turning a line red or green from a HEX value in the data. For a complex feed the team can set the mapping up for you. Live data is on the Cockpit plan.
Syntax & shortcodes
Type these into a board's text and they flip in the live value. The #...# markers tell Split-Flap TV what to fetch.
JSON table, general form
#JSONTABLE#{URL}#{startposition}#{numberofrows}#{instruction}#{columnname}:{alignment}:{length}#{columnname}:{alignment}:{length}#Repeat the {columnname}:{alignment}:{length} block once per column. Every parameter is in the reference below.
A working example you can paste in
#JSONTABLE#https://splitflaptv.com/FakeData.json#1#0#1#Name:L:12#CEO:L:16#Reads our sample feed and shows every company name (12 characters, left-aligned) and its CEO (16 characters, left-aligned), from row 1 to the last row, with a space between the columns.
The sample feed it reads
{
"ctRoot": {
"company": [
{
"name": "Sydney B.V",
"address": { "street": "9069 Charity Lane", "city": "Greenville" },
"ceo": "Kristel Bratton",
"dateCreated": "2017-03-03"
},
{ "name": "London Inc", "ceo": "Shelly Land", "dateCreated": "1978-10-11" },
{ "name": "Dj SIA", "ceo": "Kellee Boyce-Turner" }
]
}
}Ten companies, each with a name, an address, a ceo and a dateCreated. The field names in your shortcode come straight from a feed like this one. Open https://splitflaptv.com/FakeData.json to see it in full.
What lands on the board
Sydney B.V Kristel Bratton
London Inc Shelly Land
Dj SIA Kellee Boyce-Tur
Ix B.V Sona Kolb
Franchise St Luann Tribble
Devoted Ener Lacresha StonerThe first 6 of 10 rows. Notice the truncation: 'Kellee Boyce-Turner' is cut to 16 characters and 'Franchise Store' to 12, because that is what those columns were given. Widen the column to keep the full value.
Right-align a price column
#JSONTABLE#https://example.com/prices.json#1#0#1#item:L:14#price:R:8#L for names, R for numbers, so the prices line up on their last digit down the board. C centres the value.
Page a long feed across two boards
#JSONTABLE#https://example.com/prices.json#1#10#1#item:L:14#price:R:8#
#JSONTABLE#https://example.com/prices.json#11#10#1#item:L:14#price:R:8#The first board shows rows 1 to 10, the second rows 11 to 20. Put them on a schedule and a long list rotates by itself.
Reference
JSON table parameters
| Parameter | Meaning | Example |
|---|---|---|
| {URL} | Address of the JSON file | https://splitflaptv.com/FakeData.json |
| {startposition} | Fills the display starting with this row number. Typically, you start from row number 1 of your JSON data, but maybe you want to use number 11 on the second page of your board if you have many rows. | 1 |
| {numberofrows} | Number of rows to be filled, counting from the start position value. When you use 5, then 5 rows from the starting position are filled on your screen. Set to 0 so that we can fill the board till the last line. | 0 |
| {instruction} | Special formatting options. Set value to 1 to add a space between 2 columns. Set to 0 to not add this space. | 1 |
| {columnname} | Name of the field in your JSON data to show in this column. Repeat the {columnname}:{alignment}:{length} block once per column you want on the board. | company |
| {alignment} | How to align the value within the foreseen length of this column. Use L for left-aligned, R for right-aligned, and C for centered. | L |
| {length} | What is the number of characters that we have to use for this column? Shorter text is extended with spaces. Longer text is truncated. | 12 |
Step by step
-
01
Have a structured JSON feed
Point to an open JSON address that returns rows of data, for example a price list, a schedule or a league table.
-
02
Check the field names
Open the feed in a browser and note the exact field names you want, they go straight into the shortcode.
-
03
Add the JSONTABLE shortcode
Put the shortcode on a line of your board with your address and one block per column.
-
04
Set each column's width and alignment
Give every column a character length and L, R or C. Add the widths (plus a space per gap) to check the row fits your board.
-
05
Save
Save the board. The whole table flips into place and every cell keeps itself current.
- ·Add up your column lengths before you save: the columns plus one space per gap must fit the width of your board, or the last column falls off the edge.
- ·{length} truncates as well as pads, so a 12-character column turns 'Franchise Store' into 'Franchise St'. Widen the column if names are getting cut.
- ·Use R alignment for numbers and prices so the digits line up down the board, and L for names.
- ·Set {numberofrows} to 0 to fill the board to the last row, or pair a start position with a fixed count to page through a long feed across two boards.
- ·Keep the feed public and lightweight so the board can read it reliably.
- ·A HEX colour field in your data can drive the line colour, so a row turns red when a figure drops and green when it is on target.
Keep reading
Show XML data in a table
Live dataConnect live data (JSON / XML & API)
ContentUsing variables (time, date & live data)
Ready to go live?
Start your free 7-day trial, no card. Live in about 5 minutes.