Created
July 26, 2012 19:44
-
-
Save cortfritz/3184083 to your computer and use it in GitHub Desktop.
Recursively display contents of JSON object using bootstrap and jade
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mixin prettyDate(uglyDate) | |
daysAgo = ((((new Date() - uglyDate) / 1000) / 60) / 60) / 24 | |
hours = uglyDate.getHours() | |
minutes = uglyDate.getMinutes() | |
ampm = hours >= 12 ? 'pm' : 'am' | |
hours = hours % 12 | |
hours = hours ? hours : 12 | |
minutes = minutes < 10 ? '0'+minutes : minutes | |
strTime = hours + ':' + minutes + ' ' + ampm | |
if daysAgo < 1 | |
| Today at #{strTime} | |
else if daysAgo <= 7 | |
weekDays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] | |
day = uglyDate.getDay() | |
#{weekDays[day + 1]} at #{strTime} | |
else | |
#{uglyDate.getMonth() + 1}/#{uglyDate.getDate()}/#{uglyDate.getFullYear()} | |
mixin showJson(myJsonObject, level) | |
if typeof level == 'undefined' | |
- var level = 0 | |
- level++ | |
.well(style='background-color:white') | |
.badge(style='width:1em;text-align:center;background-color:#cccccc').pull-center #{level} | |
unless typeof myJsonObject == 'undefined' | |
each value, key in myJsonObject | |
if value instanceof Array | |
p #{key}: (Array[#{value.length}]) | |
if value.length == 0 | |
| (empty) | |
else | |
.well(style='background-color:white') | |
each aValue, aIndex in value | |
p [#{aIndex}]: | |
if typeof aValue == 'undefined' | |
| (empty) | |
else if aValue instanceof Date | |
mixin prettyDate(aValue) | |
else if aValue instanceof Object | |
| (Object) | |
mixin showJson(aValue, level) | |
else | |
#{aValue} | |
else if value instanceof Date | |
p #{key}: | |
mixin prettyDate(value) | |
else if value instanceof Object | |
p #{key}: | |
if typeof value == 'undefined' || value.length == 0 | |
| (empty) | |
else | |
mixin showJson(value, level) | |
else | |
p #{key}: #{value} |
Update
Improved the layout, removed the 'title' param and made the 'level' param default to zero.
Update
I wasn't handling dates correctly. Wrote a date prettifier (do you know of a better one out there with globalized display???) and updated logic to correctly handle dates.
Update
Simplified the layout. Added an array length at the array header.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Attractively display the contents of a JSON object
This recurses through the JSON object you pass in and puts no-background bootstrap wells around each embedded object and array. Each object well shows it's recursive level index so that you can visually traverse a complex object tree.
I would be more than happy to take suggestions for improvement.
Requirements
You will need to be running bootstrap and jade.
Usage
Include or embed the mixin (i.e. the contents from lines1:31, above ".container") Reference the mixin as shown at the bottom (i.e. line 35). Enjoy!
Why do this?
My vision seems to blur when reading detail on the console so to heck with util.inspect. This is prettier and easier to read. Also when I want to pop in to debug scaffolding it's nice to not have to restart node to include util; here I can include the jade mixin in /views/_mixin-debug.jade.