Simple JSON viewer

index.pug

 
.target

script.js

function jsonViewer(json, collapsible=false) {
    var TEMPLATES = {
        item: '<div class="json__item"><div class="json__key">%KEY%</div><div class="json__value json__value--%TYPE%">%VALUE%</div></div>',
        itemCollapsible: '<label class="json__item json__item--collapsible"><input type="checkbox" class="json__toggle"/><div class="json__key">%KEY%</div><div class="json__value json__value--type-%TYPE%">%VALUE%</div>%CHILDREN%</label>',
        itemCollapsibleOpen: '<label class="json__item json__item--collapsible"><input type="checkbox" checked class="json__toggle"/><div class="json__key">%KEY%</div><div class="json__value json__value--type-%TYPE%">%VALUE%</div>%CHILDREN%</label>'
    };

    function createItem(key, value, type){
        var element = TEMPLATES.item.replace('%KEY%', key);

        if(type == 'string') {
            element = element.replace('%VALUE%', '"' + value + '"');
        } else {
            element = element.replace('%VALUE%', value);
        }

        element = element.replace('%TYPE%', type);

        return element;
    }

    function createCollapsibleItem(key, value, type, children){
        var tpl = 'itemCollapsible';
        
        if(collapsible) {
            tpl = 'itemCollapsibleOpen';
        }
        
        var element = TEMPLATES[tpl].replace('%KEY%', key);

        element = element.replace('%VALUE%', type);
        element = element.replace('%TYPE%', type);
        element = element.replace('%CHILDREN%', children);

        return element;
    }

    function handleChildren(key, value, type) {
        var html = '';

        for(var item in value) { 
            var _key = item,
                _val = value[item];

            html += handleItem(_key, _val);
        }

        return createCollapsibleItem(key, value, type, html);
    }

    function handleItem(key, value) {
        var type = typeof value;

        if(typeof value === 'object') {        
            return handleChildren(key, value, type);
        }

        return createItem(key, value, type);
    }

    function parseObject(obj) {
        _result = '<div class="json">';

        for(var item in obj) { 
            var key = item,
                value = obj[item];

            _result += handleItem(key, value);
        }

        _result += '</div>';

        return _result;
    }
    
    return parseObject(json);
};



var json = {
    'User' : {
        'Personal Info': {
            'Name': 'Eddy',
            'Age': 3
        },
        'Active': true,
        'Messages': [
            'Message 1',
            'Message 2',
            'Message 3'
        ]
    },
    'Total': 1
}

var el = document.querySelector('.target');
el.innerHTML = jsonViewer(json, true);

simple-json-viewer.markdown

Simple JSON viewer

A simple JSON viewer written. Collapsing is done with pure CSS. JS is only used to parse the JSON and generate the HTML accordingly.

A Pen by Wart Claes on CodePen.

License.

style.scss

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

.json {
    font-family: 'Source Code Pro', monospace;
    font-size: 16px;
    
    & > {
        .json__item {
            display: block;
        }
    }
}

.json__item {
    display: none;
    margin-top: 10px;
    padding-left: 20px;
    user-select: none;
}

.json__item--collapsible {
    cursor: pointer;
    overflow: hidden;
    position: relative;
    
    &::before {
        content: '+';
        position: absolute;
        left: 5px;
    }
    
    &::after {
        background-color: lightgrey;
        content: '';
        height: 100%;
        left: 9px;
        position: absolute;
        top: 26px;
        width: 1px;
    }
    
    &:hover {
        & > .json__key,
        & > .json__value {
            text-decoration: underline;
        }
    }
}

.json__toggle {
    display: none;
    
    &:checked ~ .json__item {
        display: block;
    }
}

.json__key {
    color: darkblue;
    display: inline;
    
    &::after {
        content: ': ';
    }
}

.json__value {
    display: inline;
}

.json__value--string {
    color: green;
}

.json__value--number {
    color: blue;
}

.json__value--boolean {
    color: red;
}