

Show HN: Simple visual JSON editor as an AngularJS directive - mb2100
http://mb21.github.io/JSONedit/

======
diggan
Since the author wasn't nice himself to link the Github repository, I will.
[https://github.com/mb21/JSONedit/](https://github.com/mb21/JSONedit/)

* You should create a new global variable called "app"[1], that's bad because it will create collisions with other stuff.

* The directives.js contains other directives than just the json thing[2] . Are they meant to be used with the jsonedit or is it something for the demo?

* The directive have a lot of things to do. You can notice that when you have HTML and a mixed stuff in the directive. Try taking all the calculations, parsing and actual functionality that have with the data to do, and move in into a provider. Let the directive only handle how to show and interact with stuff. You should have a read about separation of concerns[4] and single responsibility principle[5].

Other than that, I like the idea and I would use this when debugging stuff in
my AngularJS, if it were easier the actually include. It seems to be dependent
on Angular UI for some strange reason. Handy that you can edit the data live.
Nice work!

[1] [https://github.com/mb21/JSONedit/blob/gh-
pages/js/directives...](https://github.com/mb21/JSONedit/blob/gh-
pages/js/directives.js#L1)

[2] [https://github.com/mb21/JSONedit/blob/gh-
pages/js/directives...](https://github.com/mb21/JSONedit/blob/gh-
pages/js/directives.js#L12-L27) and [https://github.com/mb21/JSONedit/blob/gh-
pages/js/directives...](https://github.com/mb21/JSONedit/blob/gh-
pages/js/directives.js#L31-L38)

[3] [https://github.com/mb21/JSONedit/blob/gh-
pages/js/directives...](https://github.com/mb21/JSONedit/blob/gh-
pages/js/directives.js#L166-L239)

[4]
[https://en.wikipedia.org/wiki/Separation_of_concerns](https://en.wikipedia.org/wiki/Separation_of_concerns)

[5]
[https://en.wikipedia.org/wiki/Single_responsibility_principl...](https://en.wikipedia.org/wiki/Single_responsibility_principle)

~~~
mb2100
Thanks for the feedback!

* yes, figured I didn't need "var app" for the demo...

* those are two helper directives needed by the main one

* I'm familiar with [4] and [5], but I don't quite see how they would apply to this situation since all I'm doing is "showing and interacting with stuff", there is no calculation, parsing etc - the data is already JSON. I can see however, that the directive is quite long, which has mostly to do with the fact that it's calling itself recursively and all cases are packed into it.

* I used multiSortable to get the array elements to be drag-and-droppable, that's where the AngularUI dependency is coming from.

------
lfuller
Is it just me, or do all these visual editors that have been popping up on
Hacker News lately seem to be more difficult to read than Vanilla JSON?

One of the main founding concepts being JSON was to make a human-readable data
representation. It may just be because I work with it on a daily basis, but I
find that it's one of the best data formats for fast and simple readability. I
find myself spending more time figuring out what's going on in these visual
JSON editors than if I was simply reading the JSON directly.

~~~
mb2100
well, the use case I had in mind was more letting end users manipulate some
JSON...

