Skip to content

Instantly share code, notes, and snippets.

@JosePedroDias

JosePedroDias/example.html

Last active August 29, 2015 14:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JosePedroDias/5bd9babe4fbf3656a195 to your computer and use it in GitHub Desktop.
Save JosePedroDias/5bd9babe4fbf3656a195 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONTree example</title>
<link type="text/css" rel="stylesheet" href="jsontree.css"></link>
<script type="text/javascript" src="jsontree.js"></script>
</head>
<body>
<div id="view"></div>
<script type="text/javascript">
var o = {
"foo": "bar",
"foos": ["b","a","r"],
"bar": {
"foo": "bar",
"bar": false,
"asd": null,
"foobar": 1234
}
};
var viewEl = document.getElementById('view');
viewEl.innerHTML = JSONTree.create(o, 0);
</script>
</body>
</html>
Raw
jsontree.css
.json-content {
font-size: 12px;
font-weight: 400;
color: #444;
font-family: "Lucida Console", Monaco, monospace;
}
.json-object-expand:after {
content: '+';
}
.json-object-collapse:after {
content: '-';
}
.json-object-expand,
.json-object-collapse {
display: inline-block;
font-weight: 500;
color: #85144B;
margin-left: 1px;
margin-right: 1px;
cursor: pointer;
}
.json-object-expand:hover,
.json-object-collapse:hover {
background-color: #85144B;
color: #FFF;
}
.json-property {
color: #111111;
font-weight: 500;
}
.json-number {
color: #B10DC9;
}
.json-string {
color: #2ECC40;
}
.json-boolean {
color: #0074D9;
}
.json-null {
color: gray;
}
.json-object {
padding-left: 2em;
}
.json-visible {
height: auto;
}
.json-collapsed {
display: none;
}
Raw
jsontree.js
var JSONTree = {
id: 0,
random: 0,
startsCollapsed: false,
escapeMap: {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#x27;',
'/': '&#x2F;'
},
collapse_icon: '<span class="json-object-collapse"></span>',
expand_icon: '<span class="json-object-expand"></span>',
escape: function(text) {
return text.replace(/[&<>'"]/g, function(t) {
return JSONTree.escapeMap[t];
});
},
create: function(data, startsCollapsed) {
JSONTree.startsCollapsed = !!startsCollapsed;
JSONTree.id = 0;
JSONTree.random = ~~(Math.random() *10000);
return JSONTree.div(JSONTree.jsValue(data), {'class': 'json-content'});
},
newId: function() {
JSONTree.id += 1;
return JSONTree.random + "_" + JSONTree.id;
},
div: function(text, attrs) {
return JSONTree.html('div', text, attrs);
},
span: function(text, attrs) {
return JSONTree.html('span', text, attrs);
},
html: function(type, text, attrs) {
var html = '<' + type;
if (attrs != null) {
Object.keys(attrs).forEach(function(attr) {
html += ' ' + attr + '=\"' + attrs[attr] + '\"';
});
}
html += '>' + text + '</' + type + '>';
return html;
},
collapseIcon: function(id) {
var attrs = {onclick: "JSONTree.toggleVisible('collapse_json" + id + "')" };
return JSONTree.span(JSONTree.startsCollapsed ? JSONTree.expand_icon : JSONTree.collapse_icon, attrs);
},
jsValue: function(value) {
if (value == null) {
return JSONTree.jsText("null","null");
}
var type = typeof value;
if (type === 'boolean' || type === 'number') {
return JSONTree.jsText(type,value);
} else if (type === 'string') {
return JSONTree.jsText(type,'"' + JSONTree.escape(value) + '"');
} else {
var elementId = JSONTree.newId();
return value instanceof Array ? JSONTree.jsArray(elementId, value) : JSONTree.jsObject(elementId, value);
}
},
jsObject: function(id, data) {
var object_content = "{" + JSONTree.collapseIcon(id);
var object_properties = '';
Object.keys(data).forEach(function(name, position, names) {
if (position == names.length - 1) { // dont add the comma
object_properties += JSONTree.div(JSONTree.jsProperty(name, data[name]));
} else {
object_properties += JSONTree.div(JSONTree.jsProperty(name, data[name]) + ',');
}
});
object_content += JSONTree.div(object_properties, {'class': (JSONTree.startsCollapsed ? 'json-collapsed' : 'json-visible') + ' json-object', 'id': "collapse_json" + id});
return object_content += "}";
},
jsProperty: function(name, value) {
return JSONTree.span('"' + JSONTree.escape(name) + '"', {'class': 'json-property'}) + " : " + JSONTree.jsValue(value);
},
jsArray: function(id, data) {
var array_content = "[" + JSONTree.collapseIcon(id);
var values = '';
for (var i = 0; i < data.length; i++) {
if (i == data.length - 1) {
values += JSONTree.div(JSONTree.jsValue(data[i]));
} else {
values += JSONTree.div(JSONTree.jsValue(data[i]) + ',');
}
}
array_content += JSONTree.div(values, {'class': (JSONTree.startsCollapsed ? 'json-collapsed' : 'json-visible') + ' json-object', 'id': 'collapse_json' + id});
return array_content += "]";
},
jsText: function(type, value) {
return JSONTree.span(value, {'class': "json-" + type});
},
toggleVisible: function(id) {
var element = document.getElementById(id);
var classes = element.className.split(" ");
var visible = false;
for (var i = 0; i < classes.length; i++) {
if (classes[i] === "json-visible") {
visible = true;
break;
}
}
element.className = (visible ? "json-collapsed" : "json-visible") + ' json-object';
element.previousSibling.innerHTML = visible ? JSONTree.expand_icon : JSONTree.collapse_icon;
},
configure: function(collapse_icon,expand_icon) {
JSONTree.collapse_icon = collapse_icon;
JSONTree.expand_icon = expand_icon;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment