http://book.marklet.ml/json

json_formatter.js

/* This script was auto generated on previewing the "Pretty Print"-ed response body of `json_formatter.min.js` file using the Chrome DevTools's Network tab whereas `json_formatter.min.js` file itself was created manually */
window['pre'];
const version = "4.2.3";
const isExpanded = true;
window['recurse'] = (obj,keyname='',isLast=false)=>{
    const expanded = isExpanded ? 'expanded' : ''
      , c = isLast ? '' : ',';
    let type = typeof obj
      , dom = document.createDocumentFragment()
      , inner = document.createDocumentFragment()
      , i = 0;
    if (keyname != '') {
        keyname = '"' + keyname.replace(/"/g, '\\"') + '"';
    }
    if (obj && type == "object") {
        const not = (obj && keyname != '') ? ": " : ""
          , o = document.createElement("DIV")
          , ns = document.createElement("SPAN")
          , ne = document.createElement("SPAN")
          , so = document.createElement("SPAN");
        let v;
        ns.className = ne.className = "notation";
        if (obj.constructor.name.toLowerCase() == 'array') {
            for (i = 0; i < obj.length; i++) {
                inner.append(recurse(obj[i], '', i == obj.length - 1));
            }
            ns.innerText = not + "[";
            ne.innerText = "]" + c;
            o.className = "array";
            so.className = "array-name";
            v = document.createElement("DIV");
            v.className = "values";
            v.append(inner);
        } else {
            for (let keys = Object.keys(obj); i < keys.length; i++) {
                inner.append(recurse(obj[keys[i]], keys[i], i == keys.length - 1));
            }
            ns.innerText = not + "{";
            ne.innerText = "}" + c;
            o.className = "key";
            so.className = "key-name";
            v = inner;
        }
        o.className += ` ${expanded} ${v.childElementCount > 0 ? '' : 'empty'}`;
        so.append(keyname, ns);
        so.dataset["items"] = `${i} item${i > 1 ? 's' : ''}`;
        o.append(so, v, ne);
        dom.append(o);
    } else {
        const v = document.createElement("SPAN");
        let ne;
        if (isLast) {
            ne = c;
        } else {
            ne = document.createElement("SPAN");
            ne.className = "notation";
            ne.innerText = c;
        }
        if (type == "string") {
            obj = obj.replace(/"/g, '\\"');
            if (obj.match(/^https?:\/\/([\w\d]+\-)?[\w\d]+\.([\w\d]+\-)?[\w\d]+/g) && obj.match(/^https?:\/\/[A-Za-z0-9;,/?:@&=+$\-_.!~*'()#\\]*$/g)) {
                const anchor = document.createElement("A");
                anchor.href = obj;
                anchor.target = "_blank";
                anchor.innerText = obj;
                type = 'anchor';
                v.append('"', anchor, '"', ne);
            } else {
                type = "";
                v.append('"', obj, '"', ne);
            }
        } else {
            if (obj == null) {
                type = obj;
            }
            v.append(obj, ne);
        }
        v.className = "value " + type;
        if (keyname != '') {
            const p = document.createElement("DIV")
              , pn = document.createElement("SPAN")
              , ns = document.createElement("SPAN");
            p.className = "property";
            pn.className = "property-name";
            ns.className = "notation";
            ns.innerText = ": ";
            pn.append(keyname, ns);
            p.append(pn, v);
            dom.append(p);
        } else {
            dom.append(v);
        }
    }
    return dom;
}
;
window['init'] = (stylestr)=>{
    let meta = document.querySelector('meta[name="viewport"]');
    if (!meta) {
        meta = document.createElement("META");
        meta.name = "viewport";
        document.head.append(meta);
    }
    meta.content = "width=device-width,initial-scale=1.0";
    let style = JSON.parse(stylestr);
    document.body.onclick = e=>{
        if (e.target.classList.contains('key-name') || e.target.classList.contains('array-name')) {
            e.target.parentElement.classList.toggle('expanded');
        } else if (e.target.parentElement.classList.contains('key-name') || e.target.parentElement.classList.contains('array-name')) {
            e.target.parentElement.parentElement.classList.toggle('expanded');
        } else if (e.target.classList.contains('settings') || e.target.classList.contains('close')) {
            document.getElementById('dialog').classList.toggle('show');
            document.querySelector('.settings').classList.toggle('hide');
            const bkmklt = document.getElementById('bookmarklet');
            bkmklt.classList.remove('updated');
            bkmklt.innerText = 'Create Bookmarklet';
            bkmklt.href = '#';
        } else if (e.target.id == 'bookmarklet') {
            e.target.classList.add('updated');
            e.target.innerText = 'JSON Formatter';
            style = {};
            for (let i of document.querySelectorAll('input,select')) {
                if (i.type == "radio") {
                    if (i.checked) {
                        style[i.name] = i.value;
                    }
                } else {
                    style[i.id] = i.value;
                }
            }
            e.target.href = `javascript:(function(){window['pre'];const version="${version}";const isExpanded=${style.expand};window['recurse']=(obj,keyname='',isLast=false)=>${recurse.toString().match(/{[\s\S]+/g)[0]};window['init']=(stylestr)=>${init.toString().match(/{[\s\S]+/g)[0]};if(typeof pre=='undefined'){init('${JSON.stringify(style)}');}document.body.classList.toggle('formatted');})();`;
            e.target.click();
        }
    }
    ;
    pre = document.body.children[0];
    if (pre.nodeName == 'PRE') {
        try {
            let options = {
                font: {
                    label: "Font",
                    value: style["font"],
                    selections: ["Monospace", "Serif", "Sans-Serif", "Cursive", "Fantasy"],
                    type: "select"
                },
                size: {
                    label: "Font size",
                    type: "number",
                    min: "0.5",
                    max: "5",
                    step: "0.1",
                    value: style["size"],
                    after: "&nbsp;em"
                },
                brackets: {
                    label: "Brackets",
                    type: "color",
                    value: style["brackets"],
                    after: ""
                },
                keys: {
                    label: "Object keys",
                    type: "color",
                    value: style["keys"],
                    after: ""
                },
                "null-values": {
                    label: "NULL values",
                    type: "color",
                    value: style["null-values"],
                    after: ""
                },
                "numeric-values": {
                    label: "Numeric values",
                    type: "color",
                    value: style["numeric-values"],
                    after: ""
                },
                "boolean-values": {
                    label: "Boolean values",
                    type: "color",
                    value: style["boolean-values"],
                    after: ""
                },
                "string-values": {
                    label: "String values",
                    type: "color",
                    value: style["string-values"],
                    after: ""
                },
                "dropdown-highlighting": {
                    label: "Expandable structures",
                    type: "color",
                    value: style["dropdown-highlighting"],
                    after: ""
                },
                "anchor-links": {
                    label: "String URLs",
                    type: "color",
                    value: style["anchor-links"],
                    after: ""
                },
                "link-decoration": {
                    label: "URL decoration",
                    type: "select",
                    value: style["link-decoration"],
                    selections: ["None", "Underline", "Overline", "Line-through", "Underline Overline", "Double Underline", "Double Overline", "Double Line-through", "Double Underline Overline", "Dotted Underline", "Dotted Overline", "Dotted Line-through", "Dotted Underline Overline", "Dashed Underline", "Dashed Overline", "Dashed Line-through", "Dashed Underline Overline", "Wavy Underline", "Wavy Overline", "Wavy Line-through", "Wavy Underline Overline"]
                },
                "line-spacing": {
                    label: "Line spacing",
                    type: "number",
                    value: style["line-spacing"],
                    min: "-5",
                    step: "1",
                    max: "500",
                    after: "&nbsp;px"
                },
                "tab-gapping": {
                    label: "Tab gapping",
                    type: "number",
                    value: style["tab-gapping"],
                    min: "0",
                    max: "100",
                    step: "1",
                    after: "&nbsp;ch"
                },
                expand: {
                    label: "Expand by default",
                    value: style["expand"],
                    radios: {
                        true: "Yes",
                        false: "No"
                    },
                    type: "radio"
                },
                wrap: {
                    label: "Wrap lines",
                    value: style["wrap"],
                    radios: {
                        normal: "Yes",
                        nowrap: "No"
                    },
                    type: "radio"
                }
            };
            var j = JSON.parse(pre.innerText);
            let fr = document.createDocumentFragment()
              , root = document.createElement('DIV')
              , stylesheet = document.createElement('STYLE');
            root.id = "root";
            root.append(recurse(j, '', true));
            fr.append(root);
            stylesheet.innerHTML = `body.formatted{--size:${style["size"]}em;--font:${style["font"]};--brackets:${style["brackets"]};--keys:${style["keys"]};--null-values:${style["null-values"]};--numeric-values:${style["numeric-values"]};--boolean-values:${style["boolean-values"]};--string-values:${style["string-values"]};--dropdown-highlighting:${style["dropdown-highlighting"]};--anchor-links:${style["anchor-links"]};--link-decoration:${style["link-decoration"]};--line-spacing:${style["line-spacing"]}px;--tab-gapping:${style["tab-gapping"]}ch;--wrap:${style["wrap"]};--compact-height:1.15em;margin-left:0;margin-right:0;}#root{display:none;font-family:var(--font);font-size:var(--size);}body.formatted>pre{display:none;}body.formatted>#root{display:block;}.key,.array{overflow:hidden;height:var(--compact-height);position:relative;}#root *{white-space:var(--wrap);word-break:break-word;margin-top:calc(1px + var(--line-spacing));margin-bottom:calc(1px + var(--line-spacing));}.key.expanded,.array.expanded{overflow:visible;height:max-content;}.notation{color:var(--brackets);margin-left:3ch;}.key>.notation:last-child{display:block;width:max-content;}.key-name>.notation,.property-name>.notation,.value>.notation,.array-name>.notation{margin-left:0;}.key-name::before,.array-name::before{content:'// ' attr(data-items);position:absolute;left:calc(100% + 2ch);color:dimgray;white-space:nowrap;}.key.expanded>.key-name::before,.array.expanded>.array-name::before{display:none;}.key::before,.array::before{font-family:sans-serif;font-size:0.8em;color:dimgray;content:'\\25BA';position:relative;display:inline-block;}.key.expanded::before,.array.expanded::before{content:'\\25BC';color:darkgray;}.key::after,.array::after{margin-left:3ch;display:block;}.key>.key,.key>.array,.key>.property,.array>.values>.key,.array>.values>.array,.array>.values>.value{margin-left:3ch;padding-left:var(--tab-gapping);border-left:1px dotted gray;}.array>.values>.value{padding-left:calc(var(--tab-gapping) + 3ch);display:block;}.key>.property{padding-left:calc(var(--tab-gapping) + 2.6ch);}.key-name,.array-name{left:-2ch;padding-left:3ch;position:relative;}.key-name:hover,.array-name:hover{cursor:pointer;}.key-name:hover,.array-name:hover,.key-name:hover ~ .notation:last-child,.array-name:hover ~ .notation:last-child{background:var(--dropdown-highlighting);background-clip:content-box;}.key-name,.array-name,.property-name{color:var(--keys);}.key-name::after,.array-name::after{content:'...' var(--closing);color:var(--brackets);}.key-name::after{--closing:'},';}.array-name::after{--closing:'],';}#root>.array>.array-name::after{--closing:']';}#root>.key>.key-name::after{--closing:'}';}.key:nth-last-child(2)>.key-name::after{--closing:'}';}.array:nth-last-child(2)>.array-name::after{--closing:']';}.values>.key:nth-last-child(2)>.key-name::after{--closing:'},';}.values>.array:nth-last-child(2)>.array-name::after{--closing:'],';}.values>.key:last-child>.key-name::after{--closing:'}';}.values>.array:last-child>.array-name::after{--closing:']';}.key.empty>.key-name::after{content:'},';}.array.empty>.array-name::after{content:'],';}.key.empty:nth-last-child(2)>.key-name::after{content:'}';}.array.empty:nth-last-child(2)>.array-name::after{content:']';}.values>.key.empty:nth-last-child(2)>.key-name::after{content:'},';}.values>.array.empty:nth-last-child(2)>.array-name::after{content:'],';}.values>.key.empty:last-child>.key-name::after{content:'}';}.values>.array.empty:last-child>.array-name::after{content:']';}.key.expanded>.key-name::after,.array.expanded>.array-name::after{display:none;}.value.null{color:var(--null-values);}.value{color:var(--string-values);}.value.anchor{color:var(--anchor-links);}a,a:link,a:visited{text-decoration:var(--link-decoration);color:currentColor;}.value:hover>a{text-decoration:underline;}.value.number{color:var(--numeric-values);}.value.boolean{color:var(--boolean-values);}body.formatted .settings{display:block;}body.formatted .settings.hide{display:none;}.settings{display:none;position:fixed;width:30px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='' height='24' viewBox='-1 -1 26 26'%3E%3Cpath fill='lightgray' stroke='darkgray' d='M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z'/%3E%3C/svg%3E") no-repeat center;background-size:contain;top:0;right:0;margin:10px;cursor:pointer;transform:none;transition:transform 0.5s;z-index:1;}.settings:hover{transform:rotateZ(-90deg);}.settings:active{filter:brightness(0.8);}#dialog{display:none;height:100vh;justify-content:center;align-items:center;margin:0 auto;width:100%;position:fixed;z-index:1;top:0;}body.formatted #dialog.show{display:flex;}#dialog>main{display:flex;font-family:verdana;--pad:-10px;background:white;border-radius:10px;max-height:75%;padding:30px;overflow:hidden;border:1px solid lightgray;position:relative;flex-direction:column;box-shadow:0 0 10px darkgray;max-width:calc(98% - 62px);}#dialog h2{display:inline-block;width:calc(100% - 1rem + var(--pad));text-align:center;margin-top:0;}#dialog span.close{display:inline-block;position:relative;float:right;}#dialog span.close::after{cursor:pointer;content:'\\00D7';padding:calc(-1 * var(--pad));font-size:1.5rem;font-weight:bold;color:black;line-height:1.5rem;width:1.5rem;text-align:center;position:absolute;right:var(--pad);top:var(--pad);border-radius:50%;}#dialog span.close:hover::after{background:lightgray;}#dialog span.close:active::after{background:darkgray;}#dialog>main>div:nth-of-type(2){overflow:auto;padding:0 10px;}#dialog div.options{display:grid;grid-template-columns:50% 50%;row-gap:5px;column-gap:10px;}#dialog div.options>div:nth-child(2n - 1){text-align:right;}#dialog input:not([type="color"]),select{padding:4px;max-width:calc(100% - 12px);}a#bookmarklet{text-decoration:none;margin:1.66rem auto 0 auto;display:block;padding:8px 20px;background:dodgerblue;border:none;border-radius:10px;color:white;font-size:1.1rem;font-weight:bold;position:relative;top:-2px;left:-2px;box-shadow:2px 2px 5px dimgray;cursor:pointer;}a#bookmarklet:active{box-shadow:none;top:0;left:0;}a#bookmarklet.updated{box-shadow:0 0 5px dimgray;top:0;left:0;background:green;}a#bookmarklet.updated::before,a#bookmarklet.updated::after{position:absolute;top:calc(-8px - 0.55rem);color:black;font-size:calc(16px + 2.5rem);font-family:monospace;}a#bookmarklet.updated::before{content:'{';left:-1ch;}a#bookmarklet.updated::after{content:'}';right:-1ch;}a#bookmarklet.updated+span.hint{display:flex;}#dialog span.hint{display:none;margin-top:1em;font-size:0.83em;color:dimgray;align-items:center;justify-content:center;}span.hint::before{content:'\\2139';margin-right:10px;color:lightseagreen;width:1.3em;line-height:1.3em;border:1px solid lightseagreen;border-radius:50%;text-align:center;float:left;font-size:1.2em;flex-shrink:0;}a#source,a#new{text-decoration:none;text-align:center;margin-top:0.83em;font-size:0.9em;color:dimgray;display:flex;justify-content:center;align-items:center;}a#source::before{content:'';background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='32' aria-hidden='true' viewBox='0 0 16 16' version='1.1' width='32' data-view-component='true' class='octicon octicon-mark-github v-align-middle'%3E%3Cpath fill-rule='evenodd' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;width:1.6em;height:1.5em;display:inline-block;background-size:contain;margin-right:10px;}a#new{color:green;margin-top:5px;font-size:0.8em;display:none}`;
            document.head.append(stylesheet);
            document.body.append(fr);
            document.body.innerHTML += `<div class="settings"></div>`;
            fr = document.createDocumentFragment();
            let dialog = document.createElement('DIV');
            dialog.id = 'dialog';
            let entries = `<main><div><h2>Settings</h2><span class="close"></span></div><div><div class="options">`;
            for (let k in options) {
                entries += `<div><label for="${k}">${options[k].label}:</label></div><div>`;
                switch (options[k].type) {
                case "radio":
                    for (let r in options[k].radios) {
                        entries += `<label for="${k}-${r}"><input type="radio" name="${k}" id="${k}-${r}" value="${r}"`;
                        if (options[k].value == r) {
                            entries += " checked";
                        }
                        entries += `> ${options[k].radios[r]}</label>&nbsp;`;
                    }
                    break;
                case "select":
                    entries += `<select id="${k}">`;
                    for (let s of options[k].selections) {
                        let l = s.toLowerCase();
                        entries += `<option value="${l}"`;
                        if (options[k]["value"] == l) {
                            entries += " selected";
                        }
                        entries += `>${s}</option>`;
                    }
                    entries += `</select>`;
                    break;
                default:
                    entries += `<input`;
                    for (let x in options[k]) {
                        if (x != 'label' && x != 'after') {
                            entries += ` ${x}="${options[k][x]}"`;
                        }
                    }
                    entries += `id="${k}">${options[k].after}`;
                }
                entries += "</div>";
            }
            dialog.innerHTML += `${entries}</div></div><a id="bookmarklet" href="#">Create Bookmarklet</a><span class="hint">This new bookmarklet contains all the<br>above changes that you have made. Drag it<br>over to your bookmark bar to make it permanent.</span><a href="https://gist.github.com/ahmedazhar05/5bd5fa9d6ed4746c9bfe158c430b7c45" id="source" target="_blank">Source Code &bull; v${version}</a><a href="http://book.marklet.ml/json" id="new" target="_blank"></a></main>`;
            fr.append(dialog);
            document.body.append(fr);
            document.querySelectorAll('input,select').forEach(i=>{
                i.oninput = e=>{
                    let key = e.target.id
                      , value = e.target.value;
                    if (e.target.nextSibling) {
                        value += e.target.nextSibling.nodeValue.trim();
                    }
                    if (e.target.type == 'radio') {
                        key = e.target.name;
                        value = document.querySelector('input[name="' + key + '"]:checked').value;
                        if (key == 'expand') {
                            if (value == 'true') {
                                document.querySelectorAll('.key,.array').forEach(e=>e.classList.add('expanded'));
                            } else {
                                document.querySelectorAll('.expanded').forEach(e=>e.classList.remove('expanded'));
                            }
                        } else if (key == 'wrap') {
                            document.body.style.setProperty('--wrap', value);
                        }
                    } else {
                        document.body.style.setProperty('--' + key, value);
                        if (key == 'font') {
                            document.body.style.setProperty('--compact-height', (value == 'cursive') ? '1.4em' : '1.15em');
                        }
                    }
                }
                ;
            }
            );
            fetch('https://api.github.com/gists/5bd5fa9d6ed4746c9bfe158c430b7c45').then(r=>r.json()).then(d=>{
                let pv = d.files['json_formatter.min.js'].content.match(/version=(.)([\d\.]+)\1;/)[2];
                if (pv != version) {
                    const n = document.getElementById("new");
                    n.append(`new version available (v${pv})`);
                    n.style.display = "block";
                    console.log("%cNew version (v" + pv + ") of JSON Formatter Bookmarklet is available now at http://book.marklet.ml/json", "font-size:1.2em;");
                }
            }
            );
        } catch (e) {
            alert('Cannot parse the data as JSON type');
        }
    }
}
;
if (typeof pre == 'undefined') {
    init('{"size":"1.1","brackets":"#000000","keys":"#881280","null-values":"#881280","numeric-values":"#0000ff","boolean-values":"#0000ff","string-values":"#008000","dropdown-highlighting":"#d3eaf2","anchor-links":"#008000","link-decoration":"none","line-spacing":"0","tab-gapping":"2","expand":"true","font":"monospace","wrap":"normal"}');
}
document.body.classList.toggle('formatted');

json_formatter.min.js

window['pre'];const version="4.2.3";const isExpanded=true;window['recurse']=(obj,keyname='',isLast=false)=>{const expanded=isExpanded?'expanded':'',c=isLast?'':',';let type=typeof obj,dom=document.createDocumentFragment(),inner=document.createDocumentFragment(),i=0;if(keyname!=''){keyname='"'+keyname.replace(/"/g,'\\"')+'"';}if(obj&&type=="object"){const not=(obj&&keyname!='')?": ":"",o=document.createElement("DIV"),ns=document.createElement("SPAN"),ne=document.createElement("SPAN"),so=document.createElement("SPAN");let v;ns.className=ne.className="notation";if(obj.constructor.name.toLowerCase()=='array'){for(i=0;i<obj.length;i++){inner.append(recurse(obj[i],'',i==obj.length-1));}ns.innerText=not+"[";ne.innerText="]"+c;o.className="array";so.className="array-name";v=document.createElement("DIV");v.className="values";v.append(inner);}else{for(let keys=Object.keys(obj);i<keys.length;i++){inner.append(recurse(obj[keys[i]],keys[i],i==keys.length-1));}ns.innerText=not+"{";ne.innerText="}"+c;o.className="key";so.className="key-name";v=inner;}o.className+=` ${expanded} ${v.childElementCount>0?'':'empty'}`;so.append(keyname,ns);so.dataset["items"]=`${i} item${i>1?'s':''}`;o.append(so,v,ne);dom.append(o);}else{const v=document.createElement("SPAN");let ne;if(isLast){ne=c;}else{ne=document.createElement("SPAN");ne.className="notation";ne.innerText=c;}if(type=="string"){obj=obj.replace(/"/g,'\\"');if(obj.match(/^https?:\/\/([\w\d]+\-)?[\w\d]+\.([\w\d]+\-)?[\w\d]+/g)&&obj.match(/^https?:\/\/[A-Za-z0-9;,/?:@&=+$\-_.!~*'()#\\]*$/g)){const anchor=document.createElement("A");anchor.href=obj;anchor.target="_blank";anchor.innerText=obj;type='anchor';v.append('"',anchor,'"',ne);}else{type="";v.append('"',obj,'"',ne);}}else{if(obj==null){type=obj;}v.append(obj,ne);}v.className="value "+type;if(keyname!=''){const p=document.createElement("DIV"),pn=document.createElement("SPAN"),ns=document.createElement("SPAN");p.className="property";pn.className="property-name";ns.className="notation";ns.innerText=": ";pn.append(keyname,ns);p.append(pn,v);dom.append(p);}else{dom.append(v);}}return dom;};window['init']=(stylestr)=>{let meta=document.querySelector('meta[name="viewport"]');if(!meta){meta=document.createElement("META");meta.name="viewport";document.head.append(meta);}meta.content="width=device-width,initial-scale=1.0";let style=JSON.parse(stylestr);document.body.onclick=e=>{if(e.target.classList.contains('key-name')||e.target.classList.contains('array-name')){e.target.parentElement.classList.toggle('expanded');}else if(e.target.parentElement.classList.contains('key-name')||e.target.parentElement.classList.contains('array-name')){e.target.parentElement.parentElement.classList.toggle('expanded');}else if(e.target.classList.contains('settings')||e.target.classList.contains('close')){document.getElementById('dialog').classList.toggle('show');document.querySelector('.settings').classList.toggle('hide');const bkmklt=document.getElementById('bookmarklet');bkmklt.classList.remove('updated');bkmklt.innerText='Create Bookmarklet';bkmklt.href='#';}else if(e.target.id=='bookmarklet'){e.target.classList.add('updated');e.target.innerText='JSON Formatter';style={};for(let i of document.querySelectorAll('input,select')){if(i.type=="radio"){if(i.checked){style[i.name]=i.value;}}else{style[i.id]=i.value;}}e.target.href=`javascript:(function(){window['pre'];const version="${version}";const isExpanded=${style.expand};window['recurse']=(obj,keyname='',isLast=false)=>${recurse.toString().match(/{[\s\S]+/g)[0]};window['init']=(stylestr)=>${init.toString().match(/{[\s\S]+/g)[0]};if(typeof pre=='undefined'){init('${JSON.stringify(style)}');}document.body.classList.toggle('formatted');})();`;e.target.click();}};pre=document.body.children[0];if(pre.nodeName=='PRE'){try{let options={font:{label:"Font",value:style["font"],selections:["Monospace","Serif","Sans-Serif","Cursive","Fantasy"],type:"select"},size:{label:"Font size",type:"number",min:"0.5",max:"5",step:"0.1",value:style["size"],after:"&nbsp;em"},brackets:{label:"Brackets",type:"color",value:style["brackets"],after:""},keys:{label:"Object keys",type:"color",value:style["keys"],after:""},"null-values":{label:"NULL values",type:"color",value:style["null-values"],after:""},"numeric-values":{label:"Numeric values",type:"color",value:style["numeric-values"],after:""},"boolean-values":{label:"Boolean values",type:"color",value:style["boolean-values"],after:""},"string-values":{label:"String values",type:"color",value:style["string-values"],after:""},"dropdown-highlighting":{label:"Expandable structures",type:"color",value:style["dropdown-highlighting"],after:""},"anchor-links":{label:"String URLs",type:"color",value:style["anchor-links"],after:""},"link-decoration":{label:"URL decoration",type:"select",value:style["link-decoration"],selections:["None","Underline","Overline","Line-through","Underline Overline","Double Underline","Double Overline","Double Line-through","Double Underline Overline","Dotted Underline","Dotted Overline","Dotted Line-through","Dotted Underline Overline","Dashed Underline","Dashed Overline","Dashed Line-through","Dashed Underline Overline","Wavy Underline","Wavy Overline","Wavy Line-through","Wavy Underline Overline"]},"line-spacing":{label:"Line spacing",type:"number",value:style["line-spacing"],min:"-5",step:"1",max:"500",after:"&nbsp;px"},"tab-gapping":{label:"Tab gapping",type:"number",value:style["tab-gapping"],min:"0",max:"100",step:"1",after:"&nbsp;ch"},expand:{label:"Expand by default",value:style["expand"],radios:{true:"Yes",false:"No"},type:"radio"},wrap:{label:"Wrap lines",value:style["wrap"],radios:{normal:"Yes",nowrap:"No"},type:"radio"}};var j=JSON.parse(pre.innerText);let fr=document.createDocumentFragment(),root=document.createElement('DIV'),stylesheet=document.createElement('STYLE');root.id="root";root.append(recurse(j,'',true));fr.append(root);stylesheet.innerHTML=`body.formatted{--size:${style["size"]}em;--font:${style["font"]};--brackets:${style["brackets"]};--keys:${style["keys"]};--null-values:${style["null-values"]};--numeric-values:${style["numeric-values"]};--boolean-values:${style["boolean-values"]};--string-values:${style["string-values"]};--dropdown-highlighting:${style["dropdown-highlighting"]};--anchor-links:${style["anchor-links"]};--link-decoration:${style["link-decoration"]};--line-spacing:${style["line-spacing"]}px;--tab-gapping:${style["tab-gapping"]}ch;--wrap:${style["wrap"]};--compact-height:1.15em;margin-left:0;margin-right:0;}#root{display:none;font-family:var(--font);font-size:var(--size);}body.formatted>pre{display:none;}body.formatted>#root{display:block;}.key,.array{overflow:hidden;height:var(--compact-height);position:relative;}#root *{white-space:var(--wrap);word-break:break-word;margin-top:calc(1px + var(--line-spacing));margin-bottom:calc(1px + var(--line-spacing));}.key.expanded,.array.expanded{overflow:visible;height:max-content;}.notation{color:var(--brackets);margin-left:3ch;}.key>.notation:last-child{display:block;width:max-content;}.key-name>.notation,.property-name>.notation,.value>.notation,.array-name>.notation{margin-left:0;}.key-name::before,.array-name::before{content:'// ' attr(data-items);position:absolute;left:calc(100% + 2ch);color:dimgray;white-space:nowrap;}.key.expanded>.key-name::before,.array.expanded>.array-name::before{display:none;}.key::before,.array::before{font-family:sans-serif;font-size:0.8em;color:dimgray;content:'\\25BA';position:relative;display:inline-block;}.key.expanded::before,.array.expanded::before{content:'\\25BC';color:darkgray;}.key::after,.array::after{margin-left:3ch;display:block;}.key>.key,.key>.array,.key>.property,.array>.values>.key,.array>.values>.array,.array>.values>.value{margin-left:3ch;padding-left:var(--tab-gapping);border-left:1px dotted gray;}.array>.values>.value{padding-left:calc(var(--tab-gapping) + 3ch);display:block;}.key>.property{padding-left:calc(var(--tab-gapping) + 2.6ch);}.key-name,.array-name{left:-2ch;padding-left:3ch;position:relative;}.key-name:hover,.array-name:hover{cursor:pointer;}.key-name:hover,.array-name:hover,.key-name:hover ~ .notation:last-child,.array-name:hover ~ .notation:last-child{background:var(--dropdown-highlighting);background-clip:content-box;}.key-name,.array-name,.property-name{color:var(--keys);}.key-name::after,.array-name::after{content:'...' var(--closing);color:var(--brackets);}.key-name::after{--closing:'},';}.array-name::after{--closing:'],';}#root>.array>.array-name::after{--closing:']';}#root>.key>.key-name::after{--closing:'}';}.key:nth-last-child(2)>.key-name::after{--closing:'}';}.array:nth-last-child(2)>.array-name::after{--closing:']';}.values>.key:nth-last-child(2)>.key-name::after{--closing:'},';}.values>.array:nth-last-child(2)>.array-name::after{--closing:'],';}.values>.key:last-child>.key-name::after{--closing:'}';}.values>.array:last-child>.array-name::after{--closing:']';}.key.empty>.key-name::after{content:'},';}.array.empty>.array-name::after{content:'],';}.key.empty:nth-last-child(2)>.key-name::after{content:'}';}.array.empty:nth-last-child(2)>.array-name::after{content:']';}.values>.key.empty:nth-last-child(2)>.key-name::after{content:'},';}.values>.array.empty:nth-last-child(2)>.array-name::after{content:'],';}.values>.key.empty:last-child>.key-name::after{content:'}';}.values>.array.empty:last-child>.array-name::after{content:']';}.key.expanded>.key-name::after,.array.expanded>.array-name::after{display:none;}.value.null{color:var(--null-values);}.value{color:var(--string-values);}.value.anchor{color:var(--anchor-links);}a,a:link,a:visited{text-decoration:var(--link-decoration);color:currentColor;}.value:hover>a{text-decoration:underline;}.value.number{color:var(--numeric-values);}.value.boolean{color:var(--boolean-values);}body.formatted .settings{display:block;}body.formatted .settings.hide{display:none;}.settings{display:none;position:fixed;width:30px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='' height='24' viewBox='-1 -1 26 26'%3E%3Cpath fill='lightgray' stroke='darkgray' d='M24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z'/%3E%3C/svg%3E") no-repeat center;background-size:contain;top:0;right:0;margin:10px;cursor:pointer;transform:none;transition:transform 0.5s;z-index:1;}.settings:hover{transform:rotateZ(-90deg);}.settings:active{filter:brightness(0.8);}#dialog{display:none;height:100vh;justify-content:center;align-items:center;margin:0 auto;width:100%;position:fixed;z-index:1;top:0;}body.formatted #dialog.show{display:flex;}#dialog>main{display:flex;font-family:verdana;--pad:-10px;background:white;border-radius:10px;max-height:75%;padding:30px;overflow:hidden;border:1px solid lightgray;position:relative;flex-direction:column;box-shadow:0 0 10px darkgray;max-width:calc(98% - 62px);}#dialog h2{display:inline-block;width:calc(100% - 1rem + var(--pad));text-align:center;margin-top:0;}#dialog span.close{display:inline-block;position:relative;float:right;}#dialog span.close::after{cursor:pointer;content:'\\00D7';padding:calc(-1 * var(--pad));font-size:1.5rem;font-weight:bold;color:black;line-height:1.5rem;width:1.5rem;text-align:center;position:absolute;right:var(--pad);top:var(--pad);border-radius:50%;}#dialog span.close:hover::after{background:lightgray;}#dialog span.close:active::after{background:darkgray;}#dialog>main>div:nth-of-type(2){overflow:auto;padding:0 10px;}#dialog div.options{display:grid;grid-template-columns:50% 50%;row-gap:5px;column-gap:10px;}#dialog div.options>div:nth-child(2n - 1){text-align:right;}#dialog input:not([type="color"]),select{padding:4px;max-width:calc(100% - 12px);}a#bookmarklet{text-decoration:none;margin:1.66rem auto 0 auto;display:block;padding:8px 20px;background:dodgerblue;border:none;border-radius:10px;color:white;font-size:1.1rem;font-weight:bold;position:relative;top:-2px;left:-2px;box-shadow:2px 2px 5px dimgray;cursor:pointer;}a#bookmarklet:active{box-shadow:none;top:0;left:0;}a#bookmarklet.updated{box-shadow:0 0 5px dimgray;top:0;left:0;background:green;}a#bookmarklet.updated::before,a#bookmarklet.updated::after{position:absolute;top:calc(-8px - 0.55rem);color:black;font-size:calc(16px + 2.5rem);font-family:monospace;}a#bookmarklet.updated::before{content:'{';left:-1ch;}a#bookmarklet.updated::after{content:'}';right:-1ch;}a#bookmarklet.updated+span.hint{display:flex;}#dialog span.hint{display:none;margin-top:1em;font-size:0.83em;color:dimgray;align-items:center;justify-content:center;}span.hint::before{content:'\\2139';margin-right:10px;color:lightseagreen;width:1.3em;line-height:1.3em;border:1px solid lightseagreen;border-radius:50%;text-align:center;float:left;font-size:1.2em;flex-shrink:0;}a#source,a#new{text-decoration:none;text-align:center;margin-top:0.83em;font-size:0.9em;color:dimgray;display:flex;justify-content:center;align-items:center;}a#source::before{content:'';background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='32' aria-hidden='true' viewBox='0 0 16 16' version='1.1' width='32' data-view-component='true' class='octicon octicon-mark-github v-align-middle'%3E%3Cpath fill-rule='evenodd' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'%3E%3C/path%3E%3C/svg%3E") no-repeat center;width:1.6em;height:1.5em;display:inline-block;background-size:contain;margin-right:10px;}a#new{color:green;margin-top:5px;font-size:0.8em;display:none}`;document.head.append(stylesheet);document.body.append(fr);document.body.innerHTML+=`<div class="settings"></div>`;fr=document.createDocumentFragment();let dialog=document.createElement('DIV');dialog.id='dialog';let entries = `<main><div><h2>Settings</h2><span class="close"></span></div><div><div class="options">`;for(let k in options){entries+=`<div><label for="${k}">${options[k].label}:</label></div><div>`;switch(options[k].type){case "radio":for(let r in options[k].radios){entries+=`<label for="${k}-${r}"><input type="radio" name="${k}" id="${k}-${r}" value="${r}"`;if(options[k].value==r){entries+=" checked";}entries+=`> ${options[k].radios[r]}</label>&nbsp;`;}break;case "select":entries+=`<select id="${k}">`;for(let s of options[k].selections){let l=s.toLowerCase();entries+=`<option value="${l}"`;if(options[k]["value"]==l){entries+=" selected";}entries+=`>${s}</option>`;}entries+=`</select>`;break;default:entries+=`<input`;for(let x in options[k]){if(x!='label'&&x!='after'){entries+=` ${x}="${options[k][x]}"`;}}entries+=`id="${k}">${options[k].after}`;}entries+="</div>";}dialog.innerHTML+=`${entries}</div></div><a id="bookmarklet" href="#">Create Bookmarklet</a><span class="hint">This new bookmarklet contains all the<br>above changes that you have made. Drag it<br>over to your bookmark bar to make it permanent.</span><a href="https://gist.github.com/ahmedazhar05/5bd5fa9d6ed4746c9bfe158c430b7c45" id="source" target="_blank">Source Code &bull; v${version}</a><a href="http://book.marklet.ml/json" id="new" target="_blank"></a></main>`;fr.append(dialog);document.body.append(fr);document.querySelectorAll('input,select').forEach(i=>{i.oninput=e=>{let key=e.target.id,value=e.target.value;if(e.target.nextSibling){value+=e.target.nextSibling.nodeValue.trim();}if(e.target.type=='radio'){key=e.target.name;value=document.querySelector('input[name="'+key+'"]:checked').value;if(key=='expand'){if(value=='true'){document.querySelectorAll('.key,.array').forEach(e=>e.classList.add('expanded'));}else{document.querySelectorAll('.expanded').forEach(e=>e.classList.remove('expanded'));}}else if(key=='wrap'){document.body.style.setProperty('--wrap',value);}}else{document.body.style.setProperty('--'+key,value);if(key=='font'){document.body.style.setProperty('--compact-height',(value=='cursive')?'1.4em':'1.15em');}}};});fetch('https://api.github.com/gists/5bd5fa9d6ed4746c9bfe158c430b7c45').then(r=>r.json()).then(d=>{let pv=d.files['json_formatter.min.js'].content.match(/version=(.)([\d\.]+)\1;/)[2];if(pv!=version){const n=document.getElementById("new");n.append(`new version available (v${pv})`);n.style.display="block";console.log("%cNew version (v"+pv+") of JSON Formatter Bookmarklet is available now at http://book.marklet.ml/json","font-size:1.2em;");}});}catch(e){alert('Cannot parse the data as JSON type');}}};if(typeof pre == 'undefined'){init('{"size":"1.1","brackets":"#000000","keys":"#881280","null-values":"#881280","numeric-values":"#0000ff","boolean-values":"#0000ff","string-values":"#008000","dropdown-highlighting":"#d3eaf2","anchor-links":"#008000","link-decoration":"none","line-spacing":"0","tab-gapping":"2","expand":"true","font":"monospace","wrap":"normal"}');}document.body.classList.toggle('formatted');