<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.js"></script> <style > .json-document { padding: 1em 2em; } ul.json-dict, ol.json-array { list-style-type: none; margin: 0 0 0 1px; border-left: 1px dotted #ccc; padding-left: 2em; } .json-string { color: #0B7500; } .json-literal { color: #1A01CC; font-weight: bold; } a.json-toggle { position: relative; color: inherit; text-decoration: none; } a.json-toggle:focus { outline: none; } a.json-toggle:before { font-size: 1.1em; color: #c0c0c0; content: "\25BC"; position: absolute; display: inline-block; width: 1em; text-align: center; line-height: 1em; left: -1.2em; } a.json-toggle:hover:before { color: #aaa; } a.json-toggle.collapsed:before { transform: rotate(-90deg); } a.json-placeholder { color: #aaa; padding: 0 1em; text-decoration: none; } a.json-placeholder:hover { text-decoration: underline; } </style> </head> <body> <div id="aaa"></div> </body> </html> <script> (function ($) { function isCollapsable(arg) { return arg instanceof Object && Object.keys(arg).length > 0; } function isUrl(string) { var urlRegexp = /^(https?:\/\/|ftps?:\/\/)?([a-z0-9%-]+\.){1,}([a-z0-9-]+)?(:(\d{1,5}))?(\/([a-z0-9\-._~:/?#[\]@!$&‘()*+,;=%]+)?)?$/i; return urlRegexp.test(string); } function json2html(json, options) { var html = ‘‘; if (typeof json === ‘string‘) { json = json .replace(/&/g, ‘&‘) .replace(/</g, ‘<‘) .replace(/>/g, ‘>‘) .replace(/‘/g, ‘'‘) .replace(/"/g, ‘"‘); if (options.withLinks && isUrl(json)) { html += ‘<a href="‘ + json + ‘" class="json-string" target="_blank">‘ + json + ‘</a>‘; } else { if (json.indexOf(‘RED_SELF‘) > -1) { json = json.replace(‘RED_SELF‘, ‘‘); html += ‘<span class="json-literal" style="color:red">‘ + json + ‘</span>‘; } else if (json.indexOf(‘RED_parent‘) > -1) { json = json.replace(‘RED_parent‘, ‘‘); html += ‘<span class="json-literal RED_parent">‘ + json + ‘</span>‘; } else { json = json.replace(/"/g, ‘\\"‘); html += ‘<span class="json-string">"‘ + json + ‘"</span>‘; } } } else if (typeof json === ‘number‘) { html += ‘<span class="json-literal">‘ + json + ‘</span>‘; } else if (typeof json === ‘boolean‘) { html += ‘<span class="json-literal">‘ + json + ‘</span>‘; } else if (json === null) { html += ‘<span class="json-literal">null</span>‘; } else if (json instanceof Array) { if (json.length > 0) { html += ‘[<ol class="json-array">‘; for (var i = 0; i < json.length; ++i) { html += ‘<li>‘; if (isCollapsable(json[i])) { html += ‘<a href class="json-toggle"></a>‘; } html += json2html(json[i], options); if (i < json.length - 1) { html += ‘,‘; } html += ‘</li>‘; } html += ‘</ol>]‘; } else { html += ‘[]‘; } } else if (typeof json === ‘object‘) { var keyCount = Object.keys(json).length; if (keyCount > 0) { html += ‘{<ul class="json-dict">‘; for (var key in json) { if (Object.prototype.hasOwnProperty.call(json, key)) { html += ‘<li>‘; var keyRepr = options.withQuotes ? ‘<span class="json-string">"‘ + key + ‘"</span>‘ : key; if (isCollapsable(json[key])) { html += ‘<a href class="json-toggle">‘ + keyRepr + ‘</a>‘; } else { html += keyRepr; } html += ‘: ‘ + json2html(json[key], options); if (--keyCount > 0) { html += ‘,‘; } html += ‘</li>‘; } } html += ‘</ul>}‘; } else { html += ‘{}‘; } } return html; } $.fn.jsonViewer = function (json, options) { options = Object.assign( {}, { collapsed: false, rootCollapsable: true, withQuotes: false, withLinks: true }, options ); return this.each(function () { var html = json2html(json, options); if (options.rootCollapsable && isCollapsable(json)) { html = ‘<a href class="json-toggle"></a>‘ + html; } $(this).html(html); $(this).addClass(‘json-document‘); $(this).off(‘click‘); $(this).on(‘click‘, ‘a.json-toggle‘, function () { var target = $(this) .toggleClass(‘collapsed‘) .siblings(‘ul.json-dict, ol.json-array‘); target.toggle(); if (target.is(‘:visible‘)) { target.siblings(‘.json-placeholder‘).remove(); } else { var count = target.children(‘li‘).length; var placeholder = count + (count > 1 ? ‘ items‘ : ‘ item‘); target.after( ‘<a href class="json-placeholder">‘ + placeholder + ‘</a>‘ ); } return false; }); $(this).on(‘click‘, ‘a.json-placeholder‘, function () { $(this).siblings(‘a.json-toggle‘).click(); return false; }); if (options.collapsed == true) { $(this).find(‘a.json-toggle‘).click(); } }); }; })(jQuery); var obj={ "id": 1001, "type": "donut", "name": "Cake", "description": "https://en.wikipedia.org/wiki/Doughnut", "price": 2.55, "available": { "store": 42, "warehouse": 600 }, "toppings": [ { "id": 5001, "type": "None" }, { "id": 5002, "type": "Glazed" }, { "id": 5005, "type": "Sugar" }, { "id": 5003, "type": "Chocolate" }, { "id": 5004, "type": "Maple" } ], "uuids": [ "826b23ce-2669-4122-981f-3e2e4429159d", "e32111a0-6a87-49ab-b58f-a01bf8d28ba0", "c055a894-698e-41c0-b85f-7510a7351d9d", ], }; $(‘#aaa‘).jsonViewer(obj); </script>