rnd me
11-25-2008, 07:33 AM
often i find it difficult to navigate through dense json structures.
when trying to code callbacks for JSON web services like weather (http://ws.geonames.org/findNearByWeatherJSON?lat=40&lng=-88), news (http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback=rssCB&feed=http%3A%2F%2Fwww.nytimes.com%2Fservices%2Fxml%2Frss%2Fnyt%2FPolitics.xml)
, and twitter (http://search.twitter.com/search.json?q=javascript)for example, it is hard to tell where in the structure you are by looking at chunks of text.
I wrote this simple JSON browser to help out.
It binds a JSON structure to navigational and display form controls.
you can also use the online version (http://danml.com/pub/jsonBrowser.htm)
3.3KB:
<!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>Dan's JSON browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
#view { font-size: 120%;}
#tree { width: 10em; }
</style>
</head>
<!-- by Dan Davis, 2008. I, dan davis, hereby place this page (jsonBrowser.htm) into the public domain. Enjoy!-->
<body onload="boot()">
<h3>Dan's JSON Browser</h3>
<input type='button' onclick='navUp()' value='Up' /> Path <input type='text' id='paf' value='' size="88" /> <br />
<select size='12' id='tree' onchange="navTo();">
<option>Loading Object Tree</option>
</select>
<textarea rows='10' cols='80' id='view' onfocus="this.select()"></textarea>
<br />
Source:<br />
<textarea rows='16' cols='110' id="json" onfocus="this.select()">
//from an example on http://www.json.org/example.html
{
"glossary": {
"title": "example glossary",
"GlossDiv": {
"title": "S",
"GlossList": {
"GlossEntry": {
"ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
"para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": ["GML", "XML"]
},
"GlossSee": "markup"
}
}
}
}
}</textarea>
<br />
<input type='button' value='Load new JSON' onclick="loadJSON()" /> <br />
<script type='text/javascript'>
//library functions
function obKeys(ob) {var r = [];var i = 0;for (var z in ob) {if (ob.hasOwnProperty(z)) {r[i++] = z;}}return r.sort();}
function el(tid) {return document.getElementById(tid);}
function escJS(tes) {var tes2 = tes.replace(/([\r\n])/gm, "");var qw = tes2.replace(/(["'\f\b\n\t\r\/\\])/gm, "\\$1");return qw;}
//globals:
var tree,paf,ops,view;
function loadJSON(txt){
txt = txt || el('json').value;
doLoad(eval('('+txt+')'));
}
function navUp(){
var np = paf.value.split(/\[/g).slice(0,-1).join("[");
tree.paf = np;
drawTree();
}
function navTo(){
var o = ops[tree.selectedIndex];
var kn = o.text;
paf.value = tree.paf;
if(o.branch){
tree.paf = tree.paf + "[\""+kn+"\"]";
drawTree();
return;
}
view.value = String( tree.branch[ kn ] );
}
function buildTree(ob){
tree.paf="";
tree.ob = ob;
drawTree();
}
function drawTree(){
var ob = tree.ob;
paf.value = tree.paf;
var branch = ob ;
if( tree.paf ){
branch = eval( "tree.ob" + tree.paf );
//using eval to avoid n-level select case/Array syntax branches- eval should support infinite levels.
}
tree.branch= branch;
var kds =obKeys( branch ) ;
ops.length=0;
for(var b=0,mx=kds.length;b<mx;b++){
var a = kds[b];
ops[b]=new Option(a);
if(typeof branch[a]==="object"){ ops[b].style.color="blue"; ops[b].branch=true; }
}
}
function doLoad(ob){
var json= ob;
if( json ){ buildTree(json);}
}
function boot(){
tree=el("tree");
paf = el("paf");
view=el("view");
ops=tree.options;
loadJSON();
}
</script>
</body>
</html>
I hope noobies can learn a little about handling JSON by poking around the source of this copyright-free x-browser application.
It's free, so feel welcome to use the page as a template for many kinds of projects from recipe collections, address books, etc...
just hard-code the json into a variable, pass that variable as an argument to loadJSON in boot(), and you are up and running!
Please leave comments/complaints/requests and especially improvements on/about this below, I'd like to hear from you.
when trying to code callbacks for JSON web services like weather (http://ws.geonames.org/findNearByWeatherJSON?lat=40&lng=-88), news (http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback=rssCB&feed=http%3A%2F%2Fwww.nytimes.com%2Fservices%2Fxml%2Frss%2Fnyt%2FPolitics.xml)
, and twitter (http://search.twitter.com/search.json?q=javascript)for example, it is hard to tell where in the structure you are by looking at chunks of text.
I wrote this simple JSON browser to help out.
It binds a JSON structure to navigational and display form controls.
you can also use the online version (http://danml.com/pub/jsonBrowser.htm)
3.3KB:
<!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>Dan's JSON browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
#view { font-size: 120%;}
#tree { width: 10em; }
</style>
</head>
<!-- by Dan Davis, 2008. I, dan davis, hereby place this page (jsonBrowser.htm) into the public domain. Enjoy!-->
<body onload="boot()">
<h3>Dan's JSON Browser</h3>
<input type='button' onclick='navUp()' value='Up' /> Path <input type='text' id='paf' value='' size="88" /> <br />
<select size='12' id='tree' onchange="navTo();">
<option>Loading Object Tree</option>
</select>
<textarea rows='10' cols='80' id='view' onfocus="this.select()"></textarea>
<br />
Source:<br />
<textarea rows='16' cols='110' id="json" onfocus="this.select()">
//from an example on http://www.json.org/example.html
{
"glossary": {
"title": "example glossary",
"GlossDiv": {
"title": "S",
"GlossList": {
"GlossEntry": {
"ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
"para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": ["GML", "XML"]
},
"GlossSee": "markup"
}
}
}
}
}</textarea>
<br />
<input type='button' value='Load new JSON' onclick="loadJSON()" /> <br />
<script type='text/javascript'>
//library functions
function obKeys(ob) {var r = [];var i = 0;for (var z in ob) {if (ob.hasOwnProperty(z)) {r[i++] = z;}}return r.sort();}
function el(tid) {return document.getElementById(tid);}
function escJS(tes) {var tes2 = tes.replace(/([\r\n])/gm, "");var qw = tes2.replace(/(["'\f\b\n\t\r\/\\])/gm, "\\$1");return qw;}
//globals:
var tree,paf,ops,view;
function loadJSON(txt){
txt = txt || el('json').value;
doLoad(eval('('+txt+')'));
}
function navUp(){
var np = paf.value.split(/\[/g).slice(0,-1).join("[");
tree.paf = np;
drawTree();
}
function navTo(){
var o = ops[tree.selectedIndex];
var kn = o.text;
paf.value = tree.paf;
if(o.branch){
tree.paf = tree.paf + "[\""+kn+"\"]";
drawTree();
return;
}
view.value = String( tree.branch[ kn ] );
}
function buildTree(ob){
tree.paf="";
tree.ob = ob;
drawTree();
}
function drawTree(){
var ob = tree.ob;
paf.value = tree.paf;
var branch = ob ;
if( tree.paf ){
branch = eval( "tree.ob" + tree.paf );
//using eval to avoid n-level select case/Array syntax branches- eval should support infinite levels.
}
tree.branch= branch;
var kds =obKeys( branch ) ;
ops.length=0;
for(var b=0,mx=kds.length;b<mx;b++){
var a = kds[b];
ops[b]=new Option(a);
if(typeof branch[a]==="object"){ ops[b].style.color="blue"; ops[b].branch=true; }
}
}
function doLoad(ob){
var json= ob;
if( json ){ buildTree(json);}
}
function boot(){
tree=el("tree");
paf = el("paf");
view=el("view");
ops=tree.options;
loadJSON();
}
</script>
</body>
</html>
I hope noobies can learn a little about handling JSON by poking around the source of this copyright-free x-browser application.
It's free, so feel welcome to use the page as a template for many kinds of projects from recipe collections, address books, etc...
just hard-code the json into a variable, pass that variable as an argument to loadJSON in boot(), and you are up and running!
Please leave comments/complaints/requests and especially improvements on/about this below, I'd like to hear from you.