Object Styler

stylize JSON text, produce HTML output. It applies styles/colors based on key:value pairs. I don't really know a proper use for it; I used it to show pages in a website based on JSON values.

Archived !

Example

var styler = new ObjectStyler.Styler({punctuation: "codeSyl", blockIndent : "indentedSyl", endLine: "endLineSyl"}, [
    {name: "codeSyl", className: "grey"},
    {name: "greenSyl", className: "green"},
    {name: "redSyl", className: "red"},
    {name: "endLineSyl", className: "endl"},
    {name: "bigSyl", className: "big"},
    {name: "indentedSyl", className: "indentedBlock"},
    {name: "fancy", className: "big red"},
]);

var obj = {
    key1 : "value",
    key2 : 234,
    obj1 : {
        obj1Key1 : "AAA",
        obj1Key2 : "!!link,, LINK_URL,, Link Title"
    },
    numberArray : [23,"dfdf",3434],
    objectArray : [34, {key1:"v1"}, {key2:34}, 22]
}

var style = {
    key2 : {k:'redSyl',v:'bigSyl'},
    key1 : {v:'fancy'},
    obj1 : {k:'greenSyl', v: {
        obj1Key1 : {k:'redSyl', v:'fancy'}
    }},
    numberArray : {k:['bigSyl', 'greenSyl'], v:['bigSyl', 'codeSyl']},
    objectArray : {v:{key1:{k:'greenSyl',v:'redSyl'}}}
}

document.body.innerHTML = styler.style(obj,style);

Result :

<span class="grey">{</span>
<div class="indentedBlock"><span>key1</span><span class="grey"> : </span><span class="grey">"</span><span class="big red">value</span><span class="grey">"</span><span class="grey endl">,</span><span class="red">key2</span><span class="grey"> : </span><span class="big">234</span><span class="grey endl">,</span><span class="green">obj1</span><span class="grey"> : </span><span class="grey">{</span>
    <div class="indentedBlock"><span class="red">obj1Key1</span><span class="grey"> : </span><span class="grey">"</span><span class="big red">AAA</span><span class="grey">"</span><span class="grey endl">,</span><span>obj1Key2</span><span class="grey"> : </span><span class="grey">"</span><span><a href="LINK_URL">Link Title</a></span><span class="grey">"</span><span class="grey endl">,</span></div><span class="grey">}</span><span class="grey endl">,</span><span class="green big">numberArray</span><span class="grey"> : </span><span class="grey">[</span><span class="grey big">23</span><span class="grey">, </span><span class="grey">"</span><span class="grey big">dfdf</span><span class="grey">"</span><span class="grey">, </span><span class="grey big">3434</span><span class="grey">]</span><span class="grey endl">,</span><span>objectArray</span><span class="grey"> : </span><span class="grey">[</span><span>34</span><span class="grey">, </span><span class="grey">{</span>
    <div class="indentedBlock"><span>key1</span><span class="grey"> : </span><span class="grey">"</span><span>v1</span><span class="grey">"</span><span class="grey endl">,</span></div><span class="grey">}</span><span class="grey">, </span><span class="grey">{</span>
    <div class="indentedBlock"><span>key2</span><span class="grey"> : </span><span>34</span><span class="grey endl">,</span></div><span class="grey">}</span><span class="grey">, </span><span>22</span><span class="grey">]</span><span class="grey endl">,</span></div><span class="grey">}</span>