Show HN: JsonTree, a 3.53kb JavaScript tool for generating html trees from JSON(maxleiter.github.io)
maxleiter.github.io
Show HN: JsonTree, a 3.53kb JavaScript tool for generating html trees from JSON
https://maxleiter.github.io/jsonTree/
11 comments
Wrapped in a closure, thanks!
Thanks for sharing! I see your 3.5k and raise (lower?) you 1.6k
https://github.com/cheezmeister/kapok
[I think it does most of what yours does](https://github.com/Cheezmeister/kapok/blob/master/tst/kapok....) (EDIT: Nope, missing URL loading and XSS cleaning!)
https://github.com/cheezmeister/kapok
[I think it does most of what yours does](https://github.com/Cheezmeister/kapok/blob/master/tst/kapok....) (EDIT: Nope, missing URL loading and XSS cleaning!)
Yours is much cleaner code though; this was my first venture in javascript (and really programming) when I wrote it and am planning on refactoring it soon(tm). Great work with Kapok, the demo page is well done.
I didn't realize it's a tree until I clicked it. Changing the buttons to + and - signs might help.
Also, use "pointer" on them:
https://developer.mozilla.org/en/docs/Web/CSS/cursor
https://developer.mozilla.org/en/docs/Web/CSS/cursor
I'm using ⊞ and ⊟ for that.
I was confused too. It looks like an bulleted list in Chrome.
I think its cool, but def the bullets threw me. Maybe an example of the customized styling would be good.
firefox also
Originally I wanted no custom styling so the developer could decide, but I think I'll add either + - or ^ >
I noticed that your json2html function assigns the same id (top) to all non-leaf tree nodes. You might want to fix that.
This doesn't work in Safari on iOS. Values don't show up, no tree.
I definitely expected this to be like a JSON serialization format for HTMl.
Neat, but generated tree isn't keyboard accessible.
keyboard accessible? are most html trees?
They definitely should be, for accessibility reasons and because it's not that difficult to support.
Here's an example of a tree widget that can be navigated by keyboard: https://www.jstree.com/docs/html/
Here's an example of a tree widget that can be navigated by keyboard: https://www.jstree.com/docs/html/
I'm not a fan of javascript being used for the clicky handlers, even if the element being clicked is a natural clicky element like an anchor tag.
It's much better to rely on a toggle like input type=checkbox and CSS to visualize tree expand and collapse based on checkbox states than to install click handlers in javascript. I suspect you could make such an arrangement more accessible and keyboard navigable as well (via grouping.)
Javascript should only be used to dynamically load/unload subtrees on click in the case of especially huge or costly trees.
It's much better to rely on a toggle like input type=checkbox and CSS to visualize tree expand and collapse based on checkbox states than to install click handlers in javascript. I suspect you could make such an arrangement more accessible and keyboard navigable as well (via grouping.)
Javascript should only be used to dynamically load/unload subtrees on click in the case of especially huge or costly trees.
As a blind screen reader user, I rely on keyboard accessibility for navigating any type of tree.
Now I know not to checkout your project as it would be of no use to me.
Most aren't. The good ones are.
[deleted]
Doesn't work on mobile browser.
Doesn't work on mobile? (iOS)
Consider using an actual class or a closure perhaps?