Build a Simple JSON Prettier Viewer or Editor in Browser Using Vanilla Javascript Full Project For Beginners

Build a Simple JSON Prettier Viewer or Editor in Browser Using Vanilla Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a simple json prettier viewer or editor in browser using javascript.All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<div class="target"></div>

 

 

 

Now make a style.css file and copy paste the following cod

 

 

style.css

 

 

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
 .json {
     font-family: 'Source Code Pro', monospace;
     font-size: 16px;
}
 .json > .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;
}
 .json__item--collapsible::before {
     content: '+';
     position: absolute;
     left: 5px;
}
 .json__item--collapsible::after {
     background-color: lightgrey;
     content: '';
     height: 100%;
     left: 9px;
     position: absolute;
     top: 26px;
     width: 1px;
}
 .json__item--collapsible:hover > .json__key, .json__item--collapsible:hover > .json__value {
     text-decoration: underline;
}
 .json__toggle {
     display: none;
}
 .json__toggle:checked ~ .json__item {
     display: block;
}
 .json__key {
     color: darkblue;
     display: inline;
}
 .json__key::after {
     content: ': ';
}
 .json__value {
     display: inline;
}
 .json__value--string {
     color: green;
}
 .json__value--number {
     color: blue;
}
 .json__value--boolean {
     color: red;
}

 

 

 

And now make a script.js file and copy paste the following code

 

 

 

See also  Build a ASCII String to Base64 Code Encoder & Decoder & Vice Versa in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

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);

 

 

 

And now if you open the index.html file inside the browser you will see the below screenshot

See also  jsPDF Tutorial to Convert Two Tables with Headers with jspdf-autotable Library and Download it as PDF File

 

 

Leave a Reply