JSON Painter - A readable JSON script

Paint the data that is already in the element

The easiest way ot use this plugin is if you already have an HTML element that contains the JSON data.
In this case simply call the plugin without any parameters and you are all set :)

{"apiVersion":"2.0", "data":{ "updated":"2010-01-07T19:58:42.949Z", "totalItems":800, "startIndex":1, "itemsPerPage":1, "items":[ {"id":"hYB0mn5zh3c", "uploaded":"2007-06-05T22:07:03.000Z", "updated":"2010-01-07T13:26:50.000Z", "uploader":"GoogleDeveloperDay", "category":"News", "title":"Google Developers Day US - Maps API Introduction", "description":"Google Maps API Introduction ...", "tags":[ "GDD07","GDD07US","Maps" ], "thumbnail":{ "default":"http://i.ytimg.com/vi/hYB0mn5zh3c/default.jpg", "hqDefault":"http://i.ytimg.com/vi/hYB0mn5zh3c/hqdefault.jpg" }, "player":{ "default":"http://www.youtube.com/watch?v\u003dhYB0mn5zh3c" }, "content":{ "1":"rtsp://v5.cache3.c.youtube.com/CiILENy.../0/0/0/video.3gp", "5":"http://www.youtube.com/v/hYB0mn5zh3c?f...", "6":"rtsp://v1.cache1.c.youtube.com/CiILENy.../0/0/0/video.3gp" }, "duration":2840, "aspectRatio":"widescreen", "rating":4.63, "ratingCount":68, "viewCount":220101, "favoriteCount":201, "commentCount":22, "status":{ "value":"restricted", "reason":"limitedSyndication" }, "accessControl":{ "syndicate":"allowed", "commentVote":"allowed", "rate":"allowed", "list":"allowed", "comment":"allowed", "embed":"allowed", "videoRespond":"moderated" } } ] } }

Manual input

JSON painter can parse any manually entered data as well. This e shows just how easy it is do to.

Enter the JSON data in the box to the right and press the Paint it! button.

Show the JSON from the AJAX

One of the most usefull places you can use the JSON painter is when you wish to display the JSON that is returned from the AJAX.
This example show exactly how to do that.

Select the example from the dropdown to see it in action!