This is the source code of testjson.html.
The code is colored using the Coldfusion code coloring component by Paul Klinkenberg.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>$.toJSON() tests</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="toJSON.js"></script> <script type="text/javascript"> $().ready(function(){ $('#convert_btn').click(function(){ var js_str = $('input[name=js]:checked').next('label').text(); var js_obj = eval(js_str); var data = $.toJSON(js_obj, parseInt($('#compact').val()), parseInt($('#indent').val())); $('#txtarea').val( data ); }); }); </script> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px;} label { padding: 1px 10px 1px 0px; margin-right:15px;} label:hover { background-color:#eee;} textarea { width:70%;height:300px; background-color:#f6f6f6; } </style> </head> <body id="body"> <h1>jQuery.toJSON(object, compact, indent<em>, depth</em>)</h1> <p><strong>Parameters:</strong></p> <form action="#"> <table> <tr> <td><strong>Compact</strong></td> <td><select id="compact"><option value="1">true</option><option value="0">false</option></select></td> <td><em>add spaces between elements in the json string? This setting is ignored when indent=true</em></td> </tr> <tr> <td><strong>Indent</strong></td> <td><select id="indent"><option value="1">true</option><option value="0" selected="selected">false</option></select></td> <td><em>this setting allows for indented json formatting.</em></td> </tr> <tr> <td><strong>Depth</strong></td> <td>0</td> <td><em>The depth paramater is used internally to recursively indent the json string, and to check whether the maximum recursion depth is reached.</em></td> </tr> </table> <p><strong>Choose the javascript to convert to json:</strong></p> <input type="radio" name="js" id="js1" checked="checked" /><label for="js1">document.getElementById('convert_btn')</label> <input type="radio" name="js" id="js2" /><label for="js2">document</label> <input type="radio" name="js" id="js3" /><label for="js3">[1,2,3,'hi',{x:1,y:2,z:3},99]</label> <input type="radio" name="js" id="js4" /><label for="js4">document.getElementsByTagName('INPUT')</label> <input type="radio" name="js" id="js5" /><label for="js5">"I am just a text string"</label> <input type="radio" name="js" id="js6" /><label for="js6">1</label><br /> <button id="convert_btn" type="button">convert to json</button> <p><strong>The resulting json:</strong></p> <textarea id="txtarea"></textarea> </form> </body> </html>