36 ms·
Show HN: JsonTree, a 3.53kb JavaScript tool for generating html trees from JSON
- Lorin 10y agoNeat, but generated tree isn't keyboard accessible.
- MaxLeiter 10y agokeyboard accessible? are most html trees?
- simonw 10y agoThey 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/ https://www.jstree.com/docs/html/
- EdSharkey 10y agoI'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.
- onion2k 10y agoMost aren't. The good ones are.
- recklessplayer 10y agoAs 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.
- kc10 10y agoI didn't realize it's a tree until I clicked it. Changing the buttons to + and - signs might help.
- tomatsu 10y agoI'm using ⊞ and ⊟ for that.
- timfletcher 10y agoI was confused too. It looks like an bulleted list in Chrome.
- simcop2387 10y agofirefox also
- ibgib 10y agoI think its cool, but def the bullets threw me. Maybe an example of the customized styling would be good.
- MaxLeiter 10y agoOriginally I wanted no custom styling so the developer could decide, but I think I'll add either + - or ^ >
- yestoallthat 10y agoAlso, use "pointer" on them: https://developer.mozilla.org/en/docs/Web/CSS/cursor https://developer.mozilla.org/en/docs/Web/CSS/cursor
- edko 10y agoI noticed that your json2html function assigns the same id (top) to all non-leaf tree nodes. You might want to fix that.
- deleted 10y ago[deleted]
- WhitneyLand 10y agoDoesn't work on mobile? (iOS)
- Cheezmeister 10y agoThanks for sharing! I see your 3.5k and raise (lower?) you 1.6k https://github.com/cheezmeister/kapok https://github.com/cheezmeister/kapok [I think it does most of what yours does](https://github.com/Cheezmeister/kapok/blob/master/tst/kapok.spec.coffee https://github.com/Cheezmeister/kapok/blob/master/tst/kapok....) (EDIT: Nope, missing URL loading and XSS cleaning!)
- MaxLeiter 10y agoYours 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.
- brockwhittaker 10y agoYou 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?
- MaxLeiter 10y agoWrapped in a closure, thanks!
- ComputerGuru 10y agoThis doesn't work in Safari on iOS. Values don't show up, no tree.
- kyriakos 10y agoThe menu on the linked page does not work on mobile because the fork me banner is overlayed on top on it.
- MaxLeiter 10y agoRemoved the banner - thanks
- foota 10y agoI definitely expected this to be like a JSON serialization format for HTMl.
- frik 10y agoDoesn't work on mobile browser.