Theme
Theia comes with four themes used for syntax highlighting. The default theme uses Theia’s blue branding while the others conform to common color schemes seen in Web development. This represents the .json property.
Format
While most users will only use the HTML format option, Theia can also display the raw JSON using Plain as well as a Debug view which shows all of the current settings. These represent the three Methods of the object: .html(), .plain() and .debug().
Font
Family
You can override Theia’s default font with any valid
font-family value. A number of
Google Fonts are attached to the demo in addition to two fonts (Jokerman and Cooper Black) that will only display properly if you have them loaded locally. This represents the
.fontfamily property.
Font
Size
Theia defaults to 1rem for font size. Any valid font-size value entered here will override that setting. Examples using different techniques are provided in the list. This represents the .fontsize property.
Auto
Collapse
The default setting of Off will display the entire data tree fully expanded. The other settings will render any node below the selected value collapsed requiring you to expand each of those nodes manually. This represents the .autocollapse property.
Allow
Collapse
Disabling this option will prevent expand/collapse functionality. Combined with Auto Collapse you can restrict how deep the data will render. This represents the .allowcollapse property.
Item
Counts
Theia defaults to a “clean” display, showing just the data elements. Enabling this option will display a count of the number of descendant items of any array or object. This represents the .itemcounts property.
Item
Numbers
Array and Object members don’t have keys, but enabling this option will display each item’s member number. This represents the .itemnumbers property.
Roll-ups
It would be nice to see Object member names rather than numbers, particularly in collapsed views. Enabling this option will instruct Theia to look for the singular of the parent Object's key and create a virtual key. You can see how this works using either the AdventureWorks2014 or sakila example datasets which will roll-up objects, columns and views. This represents the .rollups property.
Theia JSON View is a single file, which dynamically creates needed CSS and SVG elements. Load the TheiaJSONView.js with any other scripts and then create an new instance of TheiaJSONView then pass your display container’s id to .html().
1
2
3
4
5
6
<script type="text/javascript" src="TheiaJSONView.min.js"></script>
<script>
var tjv = new TheiaJSONView()
tjv.json = { string: "a string", number: 42 }
tjv.html('myDiv')
</script>
You can also do everything all at once by passing your JSON Object or String along with your container element and options when you create the instance. A JSON string will automatically be parsed and stored for future output.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var tjv = new TheiaJSONView(
'{ "string": "a string", "number": 42 }',
'myDiv',
{
theme: 'material',
fontfamily: 'Consolas',
fontsize: '1.5rem',
allowcollapse: true,
autocollapse: 0,
rollups: false,
itemcounts: false,
itemnumbers: false
}
)
Once you have initialized the object you can make changes to its properties and it will update immediately. Depending on the parameter changed the display will either be re-styled or re-calculated.
1
2
tjv.fontsize = '24px'
tjv.itemnumbers = true
