See demo.html for full instructions.
Create a div. Use the 'jsonbrowser' class for the default styling.
<div id="browser" class="jsonbrowser"></div>
Call the jQuery function.
$('#browser').jsonbrowser('{"instruction": "pass a json string here"}');
$('#browser').jsonbrowser(..., {
'parseURLs' : true, // Whether to parse and link URLs.
'scheme' : 'http', // URLs beginning with // are automatically completed using this value.
'collapsible' : true, // Whether the user can collapse/expand nodes.
'collapsed' : false // Whether the default behavior is collapsed or not. 'collapsible' must be true.
});
$.jsonbrowser.collapseAll('#browser');
$.jsonbrowser.expandAll('#browser');
You can use the search() function to filter the data by either keys or values.
$.jsonbrowser.search('#browser', 'search term');
For the following examples we'll use this data structure:
[
{
'title': 'Harold and Maude',
'runtime': 91,
'genres': ['Comedy', 'Drama'],
'release_date': '1971-12-20',
'director': 'Hal Ashby',
'writer': 'Colin Higgins',
'roles': {
'Maude': 'Ruth Gordon',
'Harold': 'Bud Cort',
'Mrs. Chasen': 'Vivian Pickles',
'Glaucus': 'Cyril Cusack'
},
'imdb_url': 'http://www.imdb.com/title/tt0067185/'
},
{
'title': 'Garden State',
'runtime': 102,
'genres': ['Comedy', 'Drama', 'Romance'],
'release_date': '2004-09-22',
'director': 'Zach Braff',
'writer': 'Zach Braff',
'roles': {
'Andrew Largeman': 'Zach Braff',
'Gideon Largeman': 'Ian Holm',
'Sam': 'Natalie Portman',
'Mark': 'Peter Sarsgaard',
},
'imdb_url': 'http://www.imdb.com/title/tt0333766/'
}
]
If the search term does not start with a dot, only the values that contain the search term will be shown.
The search term an would show the following data structure:
[
0: {
title: "Harold and Maude",
roles: {
Mrs. Chasen: "Vivian Pickles",
},
},
1: {
genres: [
2: "Romance",
],
roles: {
Gideon Largeman: "Ian Holm",
Sam: "Natalie Portman",
},
}
]
If the search term starts with a dot, the search will filter the data by matching keys. You can filter nested structures by concatenating multiple keys with a dot, where each dot separates the depth level.
The search term .0.ro.ma would result in ...
[
0: {
roles: {
Maude: "Ruth Gordon",
},
}
]
By using the special * character a whole level can be matched. For example .*.ti would resolve to ...
[
0: {
title: "Harold and Maude",
runtime: 91,
},
1: {
title: "Garden State",
runtime: 102,
}
]