mb21 / jsonedit

User friendly, visual JSON editor built as an Angular 1 directive.

Hi there! 👋 – some things I made:

• ✍🏽 blog
• 📚 reading list
• 📄 CV
• PanWriter – a markdown editor with pandoc integration

Some things I'm interested in:

• Programming languages: Haskell, Rust, F#, OCaml
• Crafting code, molding processes and teaching

jsonedit's Issues

jQuery dependency

I looked at the JSONedit.js and directives.js files, and I don't see any jquery dependency. Is it really necessary that I add jquery to my page?

Creating a service to track tree

This is a great project. Recursion using Angular directives is very smart.

I've decided to create an Angular service to track where in the tree we are, during the recursions. It will create a breadcrumb trail of the fields (our Json data has a field called "title" which we will use for this).

It will be used in conjunction with a second JSON data source that will, based upon the breadcrumb, will control whether the field is editable and/or visible.

exposed methods:

nextLevel(currentTitle, nextTitle); // builds breadcrumb, tracks position
isEditable(); // true/false based upon json in service
isVisible(); // true/false based upon json in service

License?

This is exactly what I've been looking for. Great work!

I don't see the what license you've chosen. Can I use with my MIT-licensed project?

is JQuery UI a dependency for JSONedit?

I want to use JSONedit, but I don't have JQuery UI in my project and I don't want to use it, is JQuery UI a necessity for JSONedit?

Add a table type to a JSON editor

I would like to add a Table type along with the existing types (e.g., Text, Boolean), so that users could fill in a table and add it to the JSON object:

By adding the following code in addItemTemplate (and some other code) in directives.js, it does show the above table. But I don't know how to do the rest, i.e., adding the instance to the JSON object after pressing the Add button. Note that we could get the data of a handsontable instance from its hot-id like this.

`+ '<span ng-show="$parent.valueType == \'' +tableName+'\'"> : 
 <div ng-controller="MainCtrl as ctrl"><hot-table hot-id="mytable" datarows="ctrl.db.items" height="50" width="100"></hot-table></div>'`

Could anyone give me some hint?

Thanks

Tie

Push latest version to bower

There seems to be a quite old version in the bower repositories.

Can you please update it?
Thanks!

Is it compatible with latest angular version 2+ ?

Is it compatible with latest angular version 2+ ? , if so please share the sample code. how we can customize the edit options in the json viewer . i just want to let the user to view the data only i don't want to give them the options to edit the json data, is that possible to customize the json viewer ?

Each key input loses focus on change

editing values on array does not update json

Reproduced it on the example [1], please watch youtube video below [2].

When editing a value, it works ok for all types, save for arrays, which do not update to JSON result. This can get confusing.

There are other times in which editing the textarea does not bind correctly, still investigating that.

[1] http://mb21.github.io/JSONedit/
[2] https://www.youtube.com/watch?v=VuNzcEk8ub4

editing jsonString difficult

Editing the text within the jsonString textarea is difficult - after each character focus jumps to the json directive.

arrays of objects have conflicting styles

When displaying an array of objects the styles for both overlap. The toggle arrow for an object overlays the numbering style for an array.

Focus automatically shifted to initial element on all button clicks for Safari

Works fine for Chrome on my Macbook Pro but not Safari 7.0.6. Every click in the tree or in the textarea shifts the focus back to the initial element of the tree. Can tab or arrow through fine. If I remove the tree directive, the textarea works fine. And again, it works fine in Chrome.

How to close auto sorting ?

I want to show JSON object with its origin sort. How to do it?

Delete key badly supported

On a root node, delete twice: The second delete is sent to the browser !

change type of property causes odd behavior

Howdy - great little directive, I am using it for the UI of an API service I am building: https://github.com/southbite/freebase
The UI project is called https://github.com/southbite/freebase-ui

Anyhoo, I found an odd little behaviour that I haven't been able solve, if you change a property type from array to text in scope keeping the property name the same - the old html for the old property is not removed, and is no longer wired to click events

example json:

{
"property": ["some text"]
}

changes to

{
"property": "some text"
}

You can see this in action on your demo page by simply pasting the json in my example in the above order.

long json causes stripes to be out of sync with text

Hi,
If I use a long json, as in the following example, stripes get out of sync with the text. Is there an easy way to solve it? Thanks
{
"Name": "Joe",
"Last Name": "Miller",
"Address": {
"Street": "Neverland 42"
},
"Hobbies": [
"doing stuff",
"dreaming"
],
"Name2": "Joe",
"Last Name2": "Miller",
"Address2": {
"Street": "Neverland 42"
},
"Hobbies2": [
"doing stuff",
"dreaming"
],
"Name3": "Joe",
"Last Name3": "Miller",
"Address3": {
"Street": "Neverland 42"
},
"Hobbies3": [
"doing stuff",
"dreaming"
],
"Name4": "Joe",
"Last Name4": "Miller",
"Address4": {
"Street": "Neverland 42"
},
"Hobbies4": [
"doing stuff",
"dreaming"
]
}

Feature request: Take gist id and load it

Would be great if it was possible to retrieve from (load) and save to gist.github.com like on for instance http://dabblet.com :-)

Just a wish for your great app! :-)

Reordering list elements causes numbers to go out of sync

When reordering list elements, the order numbers to the left go out of sync. It seems this is a pretty common problem with jQuery sortable and one that i've had before. It happens because when dragging, jQuery adds another element to the list which throws everything off. I solved it by doing the following:

1. Set the newly added elements class to something different then the standard.

$(function() {
       $(el).sortable({
           placeholder: 'sortable-placeholder'
       });
});

1. Add the following CSS styling to the placeholder

.sortable-placeholder {
       height: 20px;
       display: block;
}

https://gist.github.com/shalotelli/6597324

it cannot set a name for object

So I start with my object as an empty array []. Now when I try to add an object with a nume, JSONedit will incorrectly add it. It doesn't give it a name too.

create master branch

We're using NPM instead of bower (per or Front End engineer's request) and having issues pulling your project due to a missing master branch. Any reason you don't have one? Would you mind making one?

Is it possible to constrain possible edits somehow?

Awesome library. I have a use case in which I need to constrain possible edits to a certain structure. Is it possible to enforce that with JSONedit in some way? For example using a JSON schema and validate against that for each modification?

Back-end Integration

Hi there!

I just forked your project and will try to integrate with a simple Back-End (probably node.js) so that your script save the changes made to a given .json file.

Do you have any interest of a pull request with such changes?

cannot create native boolean type

If I create a "text" node, numbers are automatically interpreted, but not booleans. Entering true yields "true" in the JSON.

f.sortable not a function errors

I keep getting these f.sortable is not a function errors. We have multiple JSON Editor's on our page and they all seem to throw the error.

Everything works, fine I would just like to clean up the console logs.

Any ideas?

angular.js:14324 TypeError: f.sortable is not a function
    at Object.link (http://localhost:8088/assets/vendor/angular-ui-sortable/sortable.min.js:1:2660)
    at http://localhost:8088/assets/vendor/angular/1.6.0/angular.js:1291:18
    at invokeLinkFn (http://localhost:8088/assets/vendor/angular/1.6.0/angular.js:10249:9)
    at nodeLinkFn (http://localhost:8088/assets/vendor/angular/1.6.0/angular.js:9638:11)
    at compositeLinkFn (http://localhost:8088/assets/vendor/angular/1.6.0/angular.js:8878:13)
    at nodeLinkFn (http://localhost:8088/assets/vendor/angular/1.6.0/angular.js:9632:11)
    at compositeLinkFn (http://localhost:8088/assets/vendor/angular/1.6.0/angular.js:8878:13)
    at publicLinkFn (http://localhost:8088/assets/vendor/angular/1.6.0/angular.js:8743:30)
    at Object.link (http://localhost:8088/assets/vendor/jsonEdit/v0.2.0/js/directives.js:253:29)
    at http://localhost:8088/assets/vendor/angular/1.6.0/angular.js:1291:18 <ol class="arrayOl ng-pristine ng-untouched ng-valid" ui-sortable="sortableOptions" ng-model="child">

Can't set text property on catalog which consists only of numbers or is false/true

Try to add new text property into catalog with value 1. It is converted into json as 1 (number) not "1"(string), if you will try enter value as "1", it will become escaped string in form of ""1"". The same is for boolean values (false,true)

Missing Semicolons

Missing semicolons line 35+36 in js/directives.js

var boolName = "Boolean"
var numberName = "Number"

ac0c792

Editor doesn't allow keys which start with $

how to show attribute level data which comes with _

Hi,

Please help me to show the attribute level data in this tree having _or @.
I dont want to treat attrbiutes to act as child element which currently happen in this tree.
I want to show the attribute value in one row not as child values.

Few ideas

For simple projects that run from .json files it would be awesome if JSONedit would allow adding whole new objects (not just properties) and also remove whole Objects. Aswell would it be possible to add "Save" button that would save all the changes to json file ?
(I will try to add those features myself, though i'm begginer in the field od AngularJS)
Otherwise, great work on it.

Angular 1.2.16

Shouldn't we replace mutli-sortable by new version ui-sortable ? Did that in my branch, see no issues so far.

Bower component doesn't include Boolean capability

I think there must be some difference between V0.2.0 that you get form bower install --save json-edit and what is in the demo mode because I can see the directives.js doesn't include a Boolean type.

Probably just needs a quick republish. I can see that the .zip folder on github for version 0.2.0 also does not include the Boolean capability.

Cheers

properties with underscores

Hello,

properties with underscores ares not allowed and it's not possible to override this behaviour.

Best regards
Dominic

Large JSON file refresh time on ng-change

Issue with long JSON file (1 mb): the ng-change and ng-model-onblur takes a long time.

<input type="text" ng-model="val" placeholder="Empty" ng-model-onblur ng-change="child[key] = possibleNumber(val)"/>

For some reason the ng-model-onblur isn't waiting for the blur event and is causing a refresh after a single edit.

I would prefer a changeset model and an update button. Unfortunately I think this may mean removing the watch() statements in the controller and the runtime binding, unless we can somehow do it asynchronously.

Additionally, ng-change causes the tree to refresh. On mine I've set the default state to collapsed.

Delete duplicate itens

After I delete a item from a list , when I edit another item in the same list the edited item has his value updated and the next item too.

I am using this list:

{ "import": [
"frontend.components.",
"common.helpers.ciHelpers.",
"frontend.models.",
"backend.models.",
"common.modules.configuracao.ConfiguracaoModule",
"backend.components.",
"common.extensions.components.",
"common.components.",
"common.helpers.",
"common.models.",
"common.utils.",
"common.validators.",
"bootstrap.helpers.",
"application.controllers.",
"application.extensions.",
"application.helpers.",
"application.models.",
"common.modules.usuario.models.",
"common.modules.usuario.components.",
"backend.modules.faq.models.*"
]
}