mb21 / jsonedit Goto Github PK
View Code? Open in Web Editor NEWUser friendly, visual JSON editor built as an Angular 1 directive.
License: MIT License
User friendly, visual JSON editor built as an Angular 1 directive.
License: MIT License
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?
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.
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">
Missing semicolons line 35+36 in js/directives.js
var boolName = "Boolean"
var numberName = "Number"
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"
]
}
Shouldn't we replace mutli-sortable by new version ui-sortable ? Did that in my branch, see no issues so far.
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! :-)
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:
$(function() {
$(el).sortable({
placeholder: 'sortable-placeholder'
});
});
.sortable-placeholder {
height: 20px;
display: block;
}
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.
On a root node, delete twice: The second delete is sent to the browser !
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
Editing the text within the jsonString textarea is difficult - after each character focus jumps to the json directive.
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
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.
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?
Hello,
properties with underscores ares not allowed and it's not possible to override this behaviour.
Best regards
Dominic
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.
If I create a "text" node, numbers are automatically interpreted, but not booleans. Entering true
yields "true"
in the JSON.
When displaying an array of objects the styles for both overlap. The toggle arrow for an object overlays the numbering style for an array.
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?
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?
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)
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.*"
]
}
I want to show JSON object with its origin sort. How to do it?
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?
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.
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
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.
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?
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
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 ?
There seems to be a quite old version in the bower repositories.
Can you please update it?
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.