5 ms·

Open-source, JavaScript JSON HTML viewer released

116 points by mythz 16y ago

mcantelon 16y ago
Another Javascript-driven JSON viewer (that also allows editing): http://www.thomasfrank.se/json_editor.html http://www.thomasfrank.se/json_editor.html
- beaumartinez 16y ago
  My go-to JSON viewer: http://jsonviewer.stack.hu/ http://jsonviewer.stack.hu/
mattezell 16y ago
Very nice. I am writing a couchapp and think this will work nicely as a report-generator. Thanks!
- mythz 16y ago
  You're welcome :)
nirmal 16y ago
When I first started interacting with APIs that use JSON I wanted a JS library to automatically convert a JSON structure into, hopefully semantically correct, HTML which I could then easily style with CSS. At the time I couldn't find anything but I did write a simple piece of JS. I show an example of how I used it to style tweets on my site: http://nirmalpatel.com/json2posh/ http://nirmalpatel.com/json2posh/
y0ghur7_xxx 16y ago
How is this different from all the javascript template engines like ejs[1], jQuery.tmpl(), jQuote2[2] or one of the many others? [1]http://embeddedjs.com/ http://embeddedjs.com/ [2]http://aefxx.com/jquery-plugins/jqote2/ http://aefxx.com/jquery-plugins/jqote2/ edit: Now I understand. This one generates the report automagically, no need to create a HTML template for the JSON data.
- mythz 16y ago
  Yeah, it's just a way to better visualize your JSON data so it becomes more readable in a glance.
moderation 16y ago
I like http://jsbeautifier.org/ http://jsbeautifier.org/
- irfn 16y ago
  that is different thing altogether. You are comparing apples and Oranges.
regularfry 16y ago
Is there a JSON microformat for marking strings as URLs which the user agent should be able to follow? 'Cos that's all that's missing from making this sort of thing a generic REST client.
- mythz 16y ago
  I think it's rare to see JSON HyperMedia data formats in the wild, XML seems the preferred choice due to its use of attributes for metadata annotation. Here's on of the few examples I've found that uses JSON: http://restafari.blogspot.com/2010/10/evolving-hal.html http://restafari.blogspot.com/2010/10/evolving-hal.html
  - mythz 16y ago
    Although I dislike the use of XML in Ajax/SPA applications and very much side with Douglas Crockford in the JSON vs XML debate :) http://www.infoq.com/presentations/Heretical-Open-Source http://www.infoq.com/presentations/Heretical-Open-Source
    - apu 16y ago
      Perhaps you could do some simple detection if a given field is a url (i.e., using a regexp) and auto-link it in the generated reports?
      - regularfry 16y ago
        That won't work reliably with relative links. It also lacks any kind of link annotation (so, is this linked resource a "parent"? A "child"? Metadata? And so on).
  - regularfry 16y ago
    There's also this: http://microformats.org/wiki/rest/json http://microformats.org/wiki/rest/json which looks interesting enough to bookmark.
vivekjishtu 16y ago
There is a bug while parsing http://reddit.com/.json http://reddit.com/.json It is unable to render it.
- jrockway 16y ago
  I couldn't even get it to accept: {"OH HAI":[{"foo":42, "bar":123}, {"foo":123, "bar":456}]}
  - thwarted 16y ago
    This: {"foo":42, "bar",123} isn't even a valid JSON object. If you make it valid JSON and replace the comma in this with a colon, it accepts it.
    - jrockway 16y ago
      That was an HN typo, as I had already closed the window where I typed the JSON.
- mythz 16y ago
  Ok, fixed a null ref bug. http://reddit.com/.json http://reddit.com/.json now works, just a little ugly
irfn 16y ago
Awesome piece of work! I am definitely gonna use this when i get a chance.
smarterchild 16y ago
I've used/loved http://chris.photobooks.com/json/default.htm http://chris.photobooks.com/json/default.htm since the beginning of time for debugging. It isn't embeddable, though I find that it's more readable.

116 points by mythz 16y ago

Another Javascript-driven JSON viewer (that also allows editing): http://www.thomasfrank.se/json_editor.html http://www.thomasfrank.se/json_editor.html

beaumartinez 16y ago
My go-to JSON viewer: http://jsonviewer.stack.hu/ http://jsonviewer.stack.hu/

mattezell 16y ago

Very nice. I am writing a couchapp and think this will work nicely as a report-generator. Thanks!

mythz 16y ago
You're welcome :)

nirmal 16y ago

When I first started interacting with APIs that use JSON I wanted a JS library to automatically convert a JSON structure into, hopefully semantically correct, HTML which I could then easily style with CSS. At the time I couldn't find anything but I did write a simple piece of JS. I show an example of how I used it to style tweets on my site: http://nirmalpatel.com/json2posh/ http://nirmalpatel.com/json2posh/

y0ghur7_xxx 16y ago

How is this different from all the javascript template engines like ejs[1], jQuery.tmpl(), jQuote2[2] or one of the many others? [1]http://embeddedjs.com/ http://embeddedjs.com/ [2]http://aefxx.com/jquery-plugins/jqote2/ http://aefxx.com/jquery-plugins/jqote2/ edit: Now I understand. This one generates the report automagically, no need to create a HTML template for the JSON data.

mythz 16y ago
Yeah, it's just a way to better visualize your JSON data so it becomes more readable in a glance.

moderation 16y ago

I like http://jsbeautifier.org/ http://jsbeautifier.org/

irfn 16y ago
that is different thing altogether. You are comparing apples and Oranges.

regularfry 16y ago

Is there a JSON microformat for marking strings as URLs which the user agent should be able to follow? 'Cos that's all that's missing from making this sort of thing a generic REST client.

mythz 16y ago
I think it's rare to see JSON HyperMedia data formats in the wild, XML seems the preferred choice due to its use of attributes for metadata annotation. Here's on of the few examples I've found that uses JSON: http://restafari.blogspot.com/2010/10/evolving-hal.html http://restafari.blogspot.com/2010/10/evolving-hal.html
- mythz 16y ago
  Although I dislike the use of XML in Ajax/SPA applications and very much side with Douglas Crockford in the JSON vs XML debate :) http://www.infoq.com/presentations/Heretical-Open-Source http://www.infoq.com/presentations/Heretical-Open-Source
  - apu 16y ago
    Perhaps you could do some simple detection if a given field is a url (i.e., using a regexp) and auto-link it in the generated reports?
    - regularfry 16y ago
      That won't work reliably with relative links. It also lacks any kind of link annotation (so, is this linked resource a "parent"? A "child"? Metadata? And so on).
- regularfry 16y ago
  There's also this: http://microformats.org/wiki/rest/json http://microformats.org/wiki/rest/json which looks interesting enough to bookmark.

vivekjishtu 16y ago

There is a bug while parsing http://reddit.com/.json http://reddit.com/.json It is unable to render it.

jrockway 16y ago
I couldn't even get it to accept: {"OH HAI":[{"foo":42, "bar":123}, {"foo":123, "bar":456}]}
- thwarted 16y ago
  This: {"foo":42, "bar",123} isn't even a valid JSON object. If you make it valid JSON and replace the comma in this with a colon, it accepts it.
  - jrockway 16y ago
    That was an HN typo, as I had already closed the window where I typed the JSON.
mythz 16y ago
Ok, fixed a null ref bug. http://reddit.com/.json http://reddit.com/.json now works, just a little ugly

irfn 16y ago

Awesome piece of work! I am definitely gonna use this when i get a chance.

smarterchild 16y ago

I've used/loved http://chris.photobooks.com/json/default.htm http://chris.photobooks.com/json/default.htm since the beginning of time for debugging. It isn't embeddable, though I find that it's more readable.