<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> formatter and colorer of raw JSON Code </title>
<Meta name = "Description" content = "a tool to format and color raw JSON code">
<Meta name = "keywords" content = "JSON, printer, colorer, format, color">
<SCRIPT>
// We need tabs as spaces and not CSS magin-left
// In order to ratain format when coping and Pasing the code
Window. Tab = "";
Function isarray (OBJ ){
Return OBJ &&
Typeof OBJ = 'object '&&
Typeof obj. Length = 'number '&&
! (Obj. propertyisenumerable ('length '));
}
Function process (){
VaR JSON = Document. getelementbyid ("rawjson"). value;
VaR html = "";
Try {
If (JSON = "") JSON = "/"/"";
VaR OBJ = eval ("[" + JSON + "]");
Html = processobject (OBJ [0], 0, false );
Document. getelementbyid ("canvas"). innerhtml = "<PRE class = 'codecontainer'>" + HTML + "</PRE> ";
} Catch (e ){
Alert ("JSON is not well formated:/N" + E. Message );
Document. getelementbyid ("canvas"). innerhtml = "";
}
}
Function processobject (OBJ, indent, addcomma, isarray, ispropertycontent ){
VaR html = "";
VaR comma = (addcomma )? "<SPAN class = 'comm' >,</span> ":"";
VaR type = typeof OBJ;
If (isarray (OBJ )){
If (obj. Length = 0 ){
HTML + = getrow (indent, "<SPAN class = 'arraybrace '> [] </span>" + comma, ispropertycontent );
} Else {
HTML + = getrow (indent, "<SPAN class = 'arraybracs'> [</span>", ispropertycontent );
For (VAR I = 0; I <obj. length; I ++ ){
HTML + = processobject (OBJ [I], indent + 1, I <(obj. Length-1), true, false );
}
HTML + = getrow (indent, "<SPAN class = 'array'>] </span>" + comma );
}
} Else if (type = 'object' & OBJ = NULL ){
HTML + = formatliteral ("null", "", comma, indent, isarray, "null ");
} Else if (type = 'object '){
VaR numprops = 0;
For (VAR prop in OBJ) numprops ++;
If (numprops = 0 ){
HTML + = getrow (indent, "<SPAN class = 'objectbrace '>{}</span>" + comma, ispropertycontent );
} Else {
HTML + = getrow (indent, "<SPAN class = 'objectbucket' >{</span>", ispropertycontent );
VaR J = 0;
For (VAR prop in OBJ ){
HTML + = getrow (indent + 1, "<SPAN class = 'propertyname'>" + Prop + "</span>:" + processobject (OBJ [prop], indent + 1, ++ j <numprops, false, true ));
}
HTML + = getrow (indent, "<SPAN class = 'objectbrac' >}</span>" + comma );
}
} Else if (type = 'number '){
HTML + = formatliteral (OBJ, "", comma, indent, isarray, "Number ");
} Else if (type = 'boolean '){
HTML + = formatliteral (OBJ, "", comma, indent, isarray, "Boolean ");
} Else if (type = 'function '){
OBJ = formatfunction (indent, OBJ );
HTML + = formatliteral (OBJ, "", comma, indent, isarray, "function ");
} Else if (type = 'undefined '){
HTML + = formatliteral ("undefined", "", comma, indent, isarray, "null ");
} Else {
HTML + = formatliteral (OBJ, "/" ", comma, indent, isarray," string ");
}
Return HTML;
}
Function formatliteral (literal, quote, comma, indent, isarray, style ){
If (typeof literal = 'string ')
Literal = literal. Split ("<"). Join ("& lt;"). Split (">"). Join ("& gt ;");
VaR STR = "<SPAN class = '" + style + "'>" + quote + literal + quote + comma + "</span> ";
If (isarray) STR = getrow (indent, STR );
Return STR;
}
Function formatfunction (indent, OBJ ){
VaR tabs = "";
For (VAR I = 0; I <indent; I ++) tabs + = Window. tab;
VaR funcstrarray = obj. tostring (). Split ("/N ");
VaR STR = "";
For (VAR I = 0; I <funcstrarray. length; I ++ ){
STR + = (I = 0 )? "": Tabs) + funcstrarray [I] + "/N ";
}
Return STR;
}
Function getrow (indent, Data, ispropertycontent ){
VaR tabs = "";
For (VAR I = 0; I <indent &&! Ispropertycontent; I ++) tabs + = Window. tab;
If (Data! = NULL & Data. length> 0 & Data. charat (data. Length-1 )! = "/N ")
Data = Data + "/N ";
Return tabs + data;
}
</SCRIPT>
<Style>
. Canvas
{
Font: 10pt Georgia;
Background-color: # ececec;
Color: #000000;
Border: solid 1px # cecece;
}
. Objectbrace
{
Color: #00aa00;
Font-weight: bold;
}
. Arraybrace
{
Color: # 0033ff;
Font-weight: bold;
}
. Propertyname
{
Color: # cc0000;
Font-weight: bold;
}
. String
{
Color: #007777;
}
. Number
{
Color: # aa00aa;
}
. Boolean
{
Color: # 0000ff;
}
. Function
{
Color: # aa6633;
Text-Decoration: italic;
}
. Null
{
Color: # 0000ff;
}
. Comma
{
Color: #000000;
Font-weight: bold;
}
Pre. codecontainer {
Margin-top: 0px;
Margin-bottom: 0px;
}
</Style>
</Head>
<Body>
<Div style = "float: Right; font-size: 11px;"> quick JSON formatter 1.0 copyright (c) 2008 Vladimir bodurov <a href = "http://blog.bodurov.com"> http://blog.bodurov.com </a> </div>
<H3 style = "margin-bottom: 2px"> formatter and colorer of raw JSON Code <Div> enter your JSON here: </div>
<Textarea id = "rawjson" Cols = "100" rows = "8">
</Textarea> <br/>
<Input type = "button" value = "format" onclick = "process ()"/>
<Div id = "canvas" class = "canvas"> </div>
</Body>
</Html>