View on Github

jJsonViewer is a jquery plugin which you can call on any jquery element. This function takes JSON or stringified JSON as input which will be converted into html and added into given element.

How to use -

• Just download jJsonViewer plugin. You only need javascript and stylesheet.
• Include both in your html page.
• Now call jJsonViewer on any element and pass it a json data $(element).jJsonViewer(json)

1
2
3

<link rel="stylesheet" type="text/css" href="/plugins/jjsonviewer/css/jjsonviewer.css">
<script type='text/javascript' src="/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src='/plugins/jjsonviewer/js/jjsonviewer.js'></script>

Demo -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

    var jjson = '{
        "name": "jJsonViewer",
        "author": {
            "name": "Shridhar Deshmukh",
            "email": "shridhar.deshmukh3@gmail.com",
            "contact": [
                {
                    "location": "office",
                    "number": 123456
                },
                {
                    "location": "home",
                    "number": 987654
                }
            ]
        }
    }';

    $('#jjson').jJsonViewer(jjson);

Output-

Enjoy collapsing and expanding over each JSON object and array. :)

Collapsed tree -

If you want the json tree to be collapsed by default, you can do so by providing `expanded: false’ option.

1

$('#jjson').jJsonViewer(jjson, {expanded: false} );

Demos-
1. Expanded Json Tree
2. Collapsed Json Tree