Posted on 1/20/2008 12:36:02 PM
in #JavaScript
Here I would like to present a tool for formatting and coloring raw JSON code. Very often if you use JSON generated by server side code it will be in a nice compact format but at the same time it will be quite hard to read it and possibly alter it. So the tool allows you to make your JSON more readable. For example if you have code like this:
[[{anArray:[2,3,4,["string1","string2",{aa:[]}], {"type":"simpleObject"},null],abotherProperty:"",anObject:{justANumber:2,func:function(){if(1>0)return false; else return true;}}}],true]
it is a real challenge to find something you need inside the graph. In this case the JSON formatter is the right tool for you.
You can see it at: http://bodurov.com/JsonFormatter/
The tool is actually just a single simple HTML page with inline script and styles. There are no includes or dependencies. There is no server code so it will run on any operating system (Windows, Mac, Linux and what have you) under any modern browser, the best formatting I think is under Firefox, but it works fine with Internet Explorer and Safari.
You can download it and use it from your desktop here: http://www.codeplex.com/QuickJsonFormatter
Share this post:
digg
Stumble Upon
del.icio.us
Technorati
E-mail
|
Posted on 7/5/2008 11:24:19 AM
Vladimir,
That is absolutely wonderful. I've been looking everywhere for something like this! This is absolutely ideal. Have you told the good people at http://www.json.org/ what you've done?
|
Posted on 7/5/2008 12:25:14 PM
Thank you Phil!
I rather think that this is a simple and not so special program but I am glad that you find it useful.
|
Posted on 1/30/2009 10:34:07 AM
Thanks for making this, Vladimir. This is better than other JSON formatters I've seen.
|
Posted on 4/27/2009 9:30:13 AM
Thank you very much for making this script. It was a nice job, Vladimir. Very useful for me. Simple code with powerful function.
|
Posted on 4/28/2009 1:36:50 AM
Thank you, I've added today an option to collapse and object or array. This way it is easier to visualize large data.
|
Posted on 9/23/2009 11:28:15 AM
Great work Vladimir.
This is so very useful.
My hat is off to you!
Thank you.
|
Posted on 11/7/2009 8:44:15 AM
|
Posted on 11/7/2009 10:25:28 AM
|
Posted on 11/12/2009 4:14:02 PM
I really like your JSON formatter!
One request, if the keys come in quoted, can we keep them quoted? Or make this an option?
Thanks!
David
|
Posted on 11/16/2009 1:14:43 PM
Thank you for putting in the key quoting! It works great.
|
Posted on 11/17/2009 4:40:15 PM
Another request.
When you de-escape strings it makes it so I can't copy and paste the parsed data into other tools.
For instance:
{"key":"\\escaped\\values\\by\\slashes"}
Becomes:
{
"key":"\escaped\values\by\slashes"
}
But this is not valid JSON, since \e \v \b and \s are not the same as \\e \\v \\b and \\s.
This reminds me of one other suggestion ... the ability to copy an entire expanded block. Ctrl-A selects the entire page not just the parsed text.
Thanks!
David
|
Posted on 11/18/2009 12:08:02 PM
Thanks again for your prompt update!
|
Posted on 12/14/2009 7:38:55 AM
Hi Vladimir,
This is fantastic! I was looking for something that would handle all of the processing on the client side and this application is just what I needed.
I do have one suggestion: When a JSON packet fails validaiton, highlighting the area of the failure would be quite useful.
Thanks again for such a great application!
Cassius
|
Posted on 3/22/2010 1:11:37 PM
I came across this tool by accident, and wow! It's really amazing and useful.
Congratulations, keep the good work.
Greetings from México.
|
Posted on 4/27/2010 5:40:54 PM
Is there a way to send a link to this page with JSON to be formatted. e.g., POST to your page?
|
Posted on 4/27/2010 7:13:52 PM
I added a button "link to this json"
|
Posted on 7/6/2010 2:57:57 AM
Thank you very much !
Currently doesn't handle Dates and Regex
I added the following lines in the ProcessObject function (just Date)
}else if(type == 'object'){
+ if (obj.constructor == (new Date).constructor) {
+ return html + FormatLiteral("new Date(" + obj.getTime() + ") // " + obj.toLocaleString(), "", comma, indent, isArray, "Date");
+ }
+ // if (obj.constructor == (new RegExp).constructor) {
var numProps = 0;
for(var prop in obj) numProps++;
|
Posted on 7/6/2010 9:37:21 AM
Thank you Panos, this is a good idea to distinguish date and regex.
|
Posted on 8/8/2010 9:15:29 AM
Hi Vladimir,
thanks for it! It is a great 2-in-1 formatter+highlighter, just what i needed.
Just for fun: i especially wanted to quickly view the content of php session files formatted (what is "almost" json:)), so inserted this dirty code right after the row [code]var json = $id("RawJson").value;[/code] seems like did do the trick:
json = json.replace(/[|;]?a\:\d+/g,"");
json = json.replace(/;i\:(\d+);/g,";s:0:$1;");
json = json.replace(/i\:(\d+)/g,"\"$1\"");
json = json.replace(/([}{;]?)s\:\d+\:/g, function(str, p1, offset, s){
if (!!p1 && p1 == "{") {
counter = 0;
return "{";
}
if (!!p1 && p1 == "}") {
counter = 0;
return "},";
}
return (counter++%2) ? "," : ":";
});
json = json.replace(/;\}/g,"}");
json = json.replace(/^\w+\:/g,"");
Regards
nlac, Hungary
|
Posted on 8/8/2010 2:46:02 PM
Thanks Nlac, that is interesting
|
Posted on 9/1/2010 8:56:11 AM
WOW- I see this tool is already 2 years old, but I just discovered it yesterday. Saved me a huge amount of headaches figuring out 2 JSON feeds I have to deal with. THANK YOU Vlad - you rock!
|