Show HN: JsonTree, a 3.53kb JavaScript tool for generating html trees from JSON | Hacker News Reader

Show HN: JsonTree, a 3.53kb JavaScript tool for generating html trees from JSON

maxleiter.github.io

78 pointsMaxLeiter24 comments

You should consider removing all the other functions from the global scope, especially because they have relatively generic names like "generateTree", "toArray", "depth", and "toggleClass".

Consider using an actual class or a closure perhaps?

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!)

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.

I'm using ⊞ and ⊟ for that.

I was confused too. It looks like an bulleted list in Chrome.

firefox also

I think its cool, but def the bullets threw me. Maybe an example of the customized styling would be good.

Originally I wanted no custom styling so the developer could decide, but I think I'll add either + - or ^ >

Also, use "pointer" on them:

https://developer.mozilla.org/en/docs/Web/CSS/cursor

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/

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.

Most aren't. The good ones are.

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.

The menu on the linked page does not work on mobile because the fork me banner is overlayed on top on it.

Removed the banner - thanks

Doesn't work on mobile browser.

Doesn't work on mobile? (iOS)

Reply on news.ycombinator.com