Click here to Skip to main content
Click here to Skip to main content
 
Add your own
alternative version

JSON Data Visualizer (for Google, Yahoo!, Bing, and Twitter) using jQuery, JavaScript, ASP.NET MVC 2.0

, 29 Jun 2010 CPOL
This article describes a JSON data visualizer for popular Web Services like Google, Yahoo!, Bing, and Twitter using jQuery, JavaScript, and ASP.NET MVC 2.0.
/*
 AUTHOR James Padolsey (http://james.padolsey.com)
 VERSION 1.02.1
 UPDATED 07-14-2009
 CONTRIBUTORS
    David Waller
*/

var prettyPrint = (function(){
    
    /* These "util" functions are not part of the core
       functionality but are  all necessary - mostly DOM helpers */
    
    var util = {
        
        el: function(type, attrs) {
            
            /* Create new element */
            var el = document.createElement(type), attr;
            
            /*Copy to single object */
            attrs = util.merge({}, attrs);
            
            /* Add attributes to el */
            if (attrs && attrs.style) {
                var styles = attrs.style;
                util.applyCSS( el, attrs.style );
                delete attrs.style;
            }
            for (attr in attrs) {
                if (attrs.hasOwnProperty(attr)) {
                    el[attr] = attrs[attr];
                }
            }
            
            return el;
        
        },
        
        applyCSS: function(el, styles) {
            /* Applies CSS to a single element */
            for (var prop in styles) {
                if (styles.hasOwnProperty(prop)) {
                    try{
                        /* Yes, IE6 SUCKS! */
                        el.style[prop] = styles[prop];
                    }catch(e){}
                }
            }
        },
        
        txt: function(t) {
            /* Create text node */
            return document.createTextNode(t);
        },
        
        row: function(cells, type, cellType) {
            
            /* Creates new <tr> */
            cellType = cellType || 'td';
            
            /* colSpan is calculated by length of null items in array */
            var colSpan = util.count(cells, null) + 1,
                tr = util.el('tr'), td,
                attrs = {
                    style: util.getStyles(cellType, type),
                    colSpan: colSpan,
                    onmouseover: function() {
                        var tds = this.parentNode.childNodes;
                        util.forEach(tds, function(cell){
                            if (cell.nodeName.toLowerCase() !== 'td') { return; }
                            util.applyCSS(cell, util.getStyles('td_hover', type));
                        });
                    },
                    onmouseout: function() {
                        var tds = this.parentNode.childNodes;
                        util.forEach(tds, function(cell){
                            if (cell.nodeName.toLowerCase() !== 'td') { return; }
                            util.applyCSS(cell, util.getStyles('td', type));
                        });
                    }
                };
                
            util.forEach(cells, function(cell){
                
                if (cell === null) { return; }
                /* Default cell type is <td> */
                td = util.el(cellType, attrs);
                
                if (cell.nodeType) {
                    /* IsDomElement */
                    td.appendChild(cell);
                } else {
                    /* IsString */
                    td.innerHTML = util.shorten(cell.toString());
                }
                
                tr.appendChild(td);
            });
            
            return tr;
        },
        
        hRow: function(cells, type){
            /* Return new <th> */
            return util.row(cells, type, 'th');
        },
        
        table: function(headings, type){
            
            headings = headings || [];
            
            /* Creates new table: */
            var attrs = {
                    thead: {
                        style:util.getStyles('thead',type)
                    },
                    tbody: {
                        style:util.getStyles('tbody',type)
                    },
                    table: {
                        style:util.getStyles('table',type)
                    }
                },
                tbl = util.el('table', attrs.table),
                thead = util.el('thead', attrs.thead),
                tbody = util.el('tbody', attrs.tbody);
                
            if (headings.length) {
                tbl.appendChild(thead);
                thead.appendChild( util.hRow(headings, type) );
            }
            tbl.appendChild(tbody);
            
            return {
                /* Facade for dealing with table/tbody
                   Actual table node is this.node: */
                node: tbl,
                tbody: tbody,
                thead: thead,
                appendChild: function(node) {
                    this.tbody.appendChild(node);
                },
                addRow: function(cells, _type, cellType){
                    this.appendChild(util.row.call(util, cells, (_type || type), cellType));
                    return this;
                }
            };
        },
        
        shorten: function(str) {
            var max = 40;
            str = str.replace(/^\s\s*|\s\s*$|\n/g,'');
            return str.length > max ? (str.substring(0, max-1) + '...') : str;
        },
        
        htmlentities: function(str) {
            return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
        },
        
        merge: function(target, source) {
            
            /* Merges two (or more) objects,
               giving the last one precedence */
            
            if ( typeof target !== 'object' ) {
                target = {};
            }
            
            for (var property in source) {
                
                if ( source.hasOwnProperty(property) ) {
                    
                    var sourceProperty = source[ property ];
                    
                    if ( typeof sourceProperty === 'object' ) {
                        target[ property ] = util.merge( target[ property ], sourceProperty );
                        continue;
                    }
                    
                    target[ property ] = sourceProperty;
                    
                }
                
            }
            
            for (var a = 2, l = arguments.length; a < l; a++) {
                util.merge(target, arguments[a]);
            }
            
            return target;
        },
        
        count: function(arr, item) {
            var count = 0;
            for (var i = 0, l = arr.length; i< l; i++) {
                if (arr[i] === item) {
                    count++;
                }
            }
            return count;
        },
        
        thead: function(tbl) {
            return tbl.getElementsByTagName('thead')[0];
        },
        
        forEach: function(arr, fn) {
            
            /* Helper: iteration */
            var len = arr.length, index = -1;
            
            while (len > ++index) {
                if(fn( arr[index], index, arr ) === false) {
                    break;
                }
            }
            
            return true;
        },
        
        type: function(v){
            try {
                /* Returns type, e.g. "string", "number", "array" etc.
                   Note, this is only used for precise typing. */
                if (v === null) { return 'null'; }
                if (v === undefined) { return 'undefined'; }
                var oType = Object.prototype.toString.call(v).match(/\s(.+?)\]/)[1].toLowerCase();
                if (v.nodeType) {
                    if (v.nodeType === 1) {
                        return 'domelement';
                    }
                    return 'domnode';
                }
                if (/^(string|number|array|regexp|function|date|boolean)$/.test(oType)) {
                    return oType;
                }
                if (typeof v === 'object') {
                    return v.jquery && typeof v.jquery === 'string' ? 'jquery' : 'object';
                }
                if (v === window || v === document) {
                    return 'object';
                }
                return 'default';
            } catch(e) {
                return 'default';
            }
        },
        
        within: function(ref) {
            /* Check existence of a val within an object
               RETURNS KEY */
            return {
                is: function(o) {
                    for (var i in ref) {
                        if (ref[i] === o) {
                            return i;
                        }
                    }
                    return '';
                }
            };
        },
        
        common: {
            circRef: function(obj, key, settings) {
                return util.expander(
                    '[POINTS BACK TO <strong>' + (key) + '</strong>]',
                    'Click to show this item anyway',
                    function() {
                        this.parentNode.appendChild( prettyPrintThis(obj,{maxDepth:1}) );
                    }
                );
            },
            depthReached: function(obj, settings) {
                return util.expander(
                    '[DEPTH REACHED]',
                    'Click to show this item anyway',
                    function() {
                        try {
                            this.parentNode.appendChild( prettyPrintThis(obj,{maxDepth:1}) );
                        } catch(e) {
                            this.parentNode.appendChild(
                                util.table(['ERROR OCCURED DURING OBJECT RETRIEVAL'],'error').addRow([e.message]).node   
                            );
                        }
                    }
                );
            }
        },
        
        getStyles: function(el, type) {
            type = prettyPrintThis.settings.styles[type] || {};
            return util.merge(
                {}, prettyPrintThis.settings.styles['default'][el], type[el]
            );
        },
        
        expander: function(text, title, clickFn) {
            return util.el('a', {
                innerHTML:  util.shorten(text) + ' <b style="visibility:hidden;">[+]</b>',
                title: title,
                onmouseover: function() {
                    this.getElementsByTagName('b')[0].style.visibility = 'visible';
                },
                onmouseout: function() {
                    this.getElementsByTagName('b')[0].style.visibility = 'hidden';
                },
                onclick: function() {
                    this.style.display = 'none';
                    clickFn.call(this);
                    return false;
                },
                style: {
                    cursor: 'pointer'
                }
            });
        },
        
        stringify: function(obj) {
            
            /* Bit of an ugly duckling!
               - This fn returns an ATTEMPT at converting an object/array/anyType
                 into a string, kinda like a JSON-deParser
               - This is used for when |settings.expanded === false| */
            
            var type = util.type(obj),
                str, first = true;
            if ( type === 'array' ) {
                str = '[';
                util.forEach(obj, function(item,i){
                    str += (i===0?'':', ') + util.stringify(item);
                });
                return str + ']';
            }
            if (typeof obj === 'object') {
                str = '{';
                for (var i in obj){
                    if (obj.hasOwnProperty(i)) {
                        str += (first?'':', ') + i + ':' + util.stringify(obj[i]);
                        first = false;
                    }
                }
                return str + '}';
            }
            if (type === 'regexp') {
                return '/' + obj.source + '/';
            }
            if (type === 'string') {
                return '"' + obj.replace(/"/g,'\\"') + '"';
            }
            return obj.toString();
        },
        
        headerGradient: (function(){
            
            var canvas = document.createElement('canvas');
            if (!canvas.getContext) { return ''; }
            var cx = canvas.getContext('2d');
            canvas.height = 30;
            canvas.width = 1;
            
            var linearGrad = cx.createLinearGradient(0,0,0,30);
            linearGrad.addColorStop(0,'rgba(0,0,0,0)');
            linearGrad.addColorStop(1,'rgba(0,0,0,0.25)');
            
            cx.fillStyle = linearGrad;
            cx.fillRect(0,0,1,30);
            
            var dataURL = canvas.toDataURL && canvas.toDataURL();
            return 'url(' + (dataURL || '') + ')';
        
        })()
        
    };
    
    // Main..
    var prettyPrintThis = function(obj, options) {
        
         /*
         *      obj :: Object to be printed                    
         *  options :: Options (merged with config)
         */
        
        options = options || {};
        
        var settings = util.merge( {}, prettyPrintThis.config, options ),
            container = util.el('div'),
            config = prettyPrintThis.config,
            currentDepth = 0,
            stack = {},
            hasRunOnce = false;
        
        /* Expose per-call settings.
           Note: "config" is overwritten (where necessary) by options/"settings"
           So, if you need to access/change *DEFAULT* settings then go via ".config" */
        prettyPrintThis.settings = settings;
        
        var typeDealer = {
            string : function(item){
                return util.txt('"' + util.shorten(item.replace(/"/g,'\\"')) + '"');
            },
            number : function(item) {
                return util.txt(item);
            },
            regexp : function(item) {
                
                var miniTable = util.table(['RegExp',null], 'regexp');
                var flags = util.table();
                var span = util.expander(
                    '/' + item.source + '/',
                    'Click to show more',
                    function() {
                        this.parentNode.appendChild(miniTable.node);
                    }
                );
                
                flags
                    .addRow(['g', item.global])
                    .addRow(['i', item.ignoreCase])
                    .addRow(['m', item.multiline]);
                
                miniTable
                    .addRow(['source', '/' + item.source + '/'])
                    .addRow(['flags', flags.node])
                    .addRow(['lastIndex', item.lastIndex]);
                    
                return settings.expanded ? miniTable.node : span;
            },
            domelement : function(element, depth) {
                
                var miniTable = util.table(['DOMElement',null], 'domelement'),
                    props = ['id', 'className', 'innerHTML', 'src', 'href'], elname = element.nodeName || '';
                
                miniTable.addRow(['tag', '&lt;' + elname.toLowerCase() + '&gt;']);
                    
                util.forEach(props, function(prop){
                    if ( element[prop] ) {
                        miniTable.addRow([ prop, util.htmlentities(element[prop]) ]);
                    }
                });
                
                return settings.expanded ? miniTable.node : util.expander(
                    'DOMElement (' + elname.toLowerCase() + ')',
                    'Click to show more',
                    function() {
                        this.parentNode.appendChild(miniTable.node);
                    }
                );
            },
            domnode : function(node){
                
                /* Deals with all DOMNodes that aren't elements (nodeType !== 1) */
                var miniTable = util.table(['DOMNode',null], 'domelement'),
                    data =  util.htmlentities( (node.data || 'UNDEFINED').replace(/\n/g,'\\n') );
                miniTable
                    .addRow(['nodeType', node.nodeType + ' (' + node.nodeName + ')'])
                    .addRow(['data', data]);
                
                return settings.expanded ? miniTable.node : util.expander(
                    'DOMNode',
                    'Click to show more',
                    function() {
                        this.parentNode.appendChild(miniTable.node);
                    }
                );
            },
            jquery : function(obj, depth, key) {
                return typeDealer['array'](obj, depth, key, true);
            },
            object : function(obj, depth, key) {
                
                /* Checking depth + circular refs */
                /* Note, check for circular refs before depth; just makes more sense */
                var stackKey = util.within(stack).is(obj);
                if ( stackKey ) {
                    return util.common.circRef(obj, stackKey, settings);
                }
                stack[key||'TOP'] = obj;
                if (depth === settings.maxDepth) {
                    return util.common.depthReached(obj, settings);
                }
                
                var table = util.table(['Object', null],'object'),
                    isEmpty = true;
                
                for (var i in obj) {
                    if (!obj.hasOwnProperty || obj.hasOwnProperty(i)) {
                        var item = obj[i],
                            type = util.type(item);
                        isEmpty = false;
                        try {
                            table.addRow([i, typeDealer[ type ](item, depth+1, i)], type);
                        } catch(e) {
                            /* Security errors are thrown on certain Window/DOM properties */
                            if (window.console && window.console.log) {
                                console.log(e.message);
                            }
                        }
                    }
                }
                
                if (isEmpty) {
                    table.addRow(['<small>[empty]</small>']);
                } else {
                    table.thead.appendChild(
                        util.hRow(['key','value'], 'colHeader')
                    );
                }
                
                var ret = (settings.expanded || hasRunOnce) ? table.node : util.expander(
                    util.stringify(obj),
                    'Click to show more',
                    function() {
                        this.parentNode.appendChild(table.node);
                    }
                );
                
                hasRunOnce = true;
                
                return ret;
                
            },
            array : function(arr, depth, key, jquery) {
                
                /* Checking depth + circular refs */
                /* Note, check for circular refs before depth; just makes more sense */
                var stackKey = util.within(stack).is(arr);
                if ( stackKey ) {
                    return util.common.circRef(arr, stackKey);
                }
                stack[key||'TOP'] = arr;
                if (depth === settings.maxDepth) {
                    return util.common.depthReached(arr);
                }
                
                /* Accepts a table and modifies it */
                var me = jquery ? 'jQuery' : 'Array', table = util.table([me + '(' + arr.length + ')', null], jquery ? 'jquery' : me.toLowerCase()),
                    isEmpty = true;
                
                if (jquery){
                    table.addRow(['selector',arr.selector]);
                }
                    
                util.forEach(arr, function(item,i){
                    isEmpty = false;
                    table.addRow([i, typeDealer[ util.type(item) ](item, depth+1, i)]);
                });
                
                if (!jquery){
                    if (isEmpty) {
                        table.addRow(['<small>[empty]</small>']);
                    } else {
                        table.thead.appendChild( util.hRow(['index','value'], 'colHeader') );
                    }
                }
                
                return settings.expanded ? table.node : util.expander(
                    util.stringify(arr),
                    'Click to show more',
                    function() {
                        this.parentNode.appendChild(table.node);
                    }
                );
                
            },
            'function' : function(fn, depth, key) {
                
                /* Checking JUST circular refs */
                var stackKey = util.within(stack).is(fn);
                if ( stackKey ) { return util.common.circRef(fn, stackKey); }
                stack[key||'TOP'] = fn;
                
                var miniTable = util.table(['Function',null], 'function'),
                    argsTable = util.table(['Arguments']),
                    args = fn.toString().match(/\((.+?)\)/),
                    body = fn.toString().match(/\(.*?\)\s+?\{?([\S\s]+)/)[1].replace(/\}?$/,'');
                    
                miniTable
                    .addRow(['arguments', args ? args[1].replace(/[^\w_,\s]/g,'') : '<small>[none/native]</small>'])
                    .addRow(['body', body]);
                    
                return settings.expanded ? miniTable.node : util.expander(
                    'function(){...}',
                    'Click to see more about this function.',
                    function(){
                        this.parentNode.appendChild(miniTable.node);
                    }
                );
            },
            'date' : function(date) {
                
                var miniTable = util.table(['Date',null], 'date'),
                    sDate = date.toString().split(/\s/);
                
                /* TODO: Make this work well in IE! */
                miniTable
                    .addRow(['Time', sDate[4]])
                    .addRow(['Date', sDate.slice(0,4).join('-')]);
                    
                return settings.expanded ? miniTable.node : util.expander(
                    'Date (timestamp): ' + (+date),
                    'Click to see a little more info about this date',
                    function() {
                        this.parentNode.appendChild(miniTable.node);
                    }
                );
                
            },
            'boolean' : function(bool) {
                return util.txt( bool.toString().toUpperCase() );
            },
            'undefined' : function() {
                return util.txt('UNDEFINED');
            },
            'null' : function() {
                return util.txt('NULL');
            },
            'default' : function() {
                /* When a type cannot be found */
                return util.txt('prettyPrint: TypeNotFound Error');
            }
        };
        
        container.appendChild( typeDealer[ (settings.forceObject) ? 'object' : util.type(obj) ](obj, currentDepth) );
        
        return container;
        
    };
    
    /* Configuration */
    
    /* All items can be overwridden by passing an
       "options" object when calling prettyPrint */
    prettyPrintThis.config = {
        
        /* Try setting this to false to save space */
        expanded: true,
        
        forceObject: false,
        maxDepth: 3,
        styles: {
            array: {
                th: {
                    backgroundColor: '#6DBD2A',
                    color: 'white'
                }
            },
            'function': {
                th: {
                    backgroundColor: '#D82525'
                }
            },
            regexp: {
                th: {
                    backgroundColor: '#E2F3FB',
                    color: '#000'
                }
            },
            object: {
                th: {
                    backgroundColor: '#1F96CF'
                }
            },
            jquery : {
                th: {
                    backgroundColor: '#FBF315'
                }
            },
            error: {
                th: {
                    backgroundColor: 'red',
                    color: 'yellow'
                }
            },
            domelement: {
                th: {
                    backgroundColor: '#F3801E'
                }
            },
            date: {
                th: {
                    backgroundColor: '#A725D8'
                }
            },
            colHeader: {
                th: {
                    backgroundColor: '#EEE',
                    color: '#000',
                    textTransform: 'uppercase'
                }
            },
            'default': {
                table: {
                    borderCollapse: 'collapse',
                    width: '100%'
                },
                td: {
                    padding: '5px',
                    fontSize: '12px',
                    backgroundColor: '#FFF',
                    color: '#222',
                    border: '1px solid #000',
                    verticalAlign: 'top',
                    fontFamily: '"Consolas","Lucida Console",Courier,mono',
                    whiteSpace: 'nowrap'
                },
                td_hover: {
                    /* Styles defined here will apply to all tr:hover > td,
                        - Be aware that "inheritable" properties (e.g. fontWeight) WILL BE INHERITED */
                },
                th: {
                    padding: '5px',
                    fontSize: '12px',
                    backgroundColor: '#222',
                    color: '#EEE',
                    textAlign: 'left',
                    border: '1px solid #000',
                    verticalAlign: 'top',
                    fontFamily: '"Consolas","Lucida Console",Courier,mono',
                    backgroundImage: util.headerGradient,
                    backgroundRepeat: 'repeat-x'
                }
            }
        }
    };
    
    return prettyPrintThis;
    
})();

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

silverazure
Architect
United States United States
Vijay Kumar: Architect, Programmer with expertise and interest in Azure, .net, Silverlight, C#, WCF, MVC, databases and mobile development. Concentrating on Windows Phone 7 and Windows Azure development. Lived in California for many years and done many exciting projects in dotnet and Windows platforms. Moved to Raleigh (RTP), North Carolina recently and available for consulting.  Blog http://Silverazure.blogspot.com.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141030.1 | Last Updated 29 Jun 2010
Article Copyright 2010 by silverazure
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid