jquery.jsonbrowser.js

Instructions

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"}');

Options

$('#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.
});

Collapsing / Expanding

$.jsonbrowser.collapseAll('#browser');
$.jsonbrowser.expandAll('#browser');

Searching

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/'
    }
]

Value search

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",
        },
    }
]

Key search

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,
    }
]