json-editor / json-editor Goto Github PK

Schema:

"platform": {
    "title": "客户端类型",
    "type": "string",
    "enum": [
          "ios",
          "android"
     ],
     "default": ""
},

Now:

Expected

Question:

How I can get the expected result? tks!

I'm no JS hero but I want to take a stab at using this Bootstrap3 date picker instead of the HTML5 date picker.

Has anyone already done this or can suggest where to start? I've been looking through the old issues from the jdorn site and seen a few hints but I thought I would ask here.

Hi – nice to see this project getting some attention.

I'm confused about the version numbers: the jdorn most recent version is 7.28 - same as the version in the dist folder here. Was this an oversight or am I looking at the wrong branch (or something)?

Hi guys,
Thank you for supporting this project.
I'm trying to build master branch from your fork and have an issue.

src/editors/object.js
 713 |  },
         ^ Expected an identifier and instead saw ','.

Apparently, curved bracket get lost somewhere during one of the huge recent merges, could you please check? I've just added one right at this line and it's built. But I'm not sure if this a right fix.

Hi.

Is there a clear guideline to making nested dropdowns? I see several comments across multiple forks but nothing clear.

Perhaps a simple example? Something that can select between category 1 and category 2 and then from subcategories 1-1, 1-2 and 1-3 or subcategories 2-1, 2-2 or 2-3?

I'm not sure if it's supposed to be oneOf or Enumsources + watch.

When an array has a previous value of let's say 2 items, then I setValue(new value), where new value is an array of shorter length (one item), I saw the array editor correctly display the new value of only one item.

But when I hit the "Add Row" button to add another item, the old value from the old 2-item array is shown again. What I expect is that the new item will be blank.

Where could I have gone wrong?

Thank you so much.

Like an 1.0.0-beta.0

From the demo website (https://json-editor.github.io/json-editor/) the CSS Framework Boostrap is giving a blank page with an error in the console.

"uncaught exception: Unknown theme bootstrap4"

First and first thanks a lot guys for such type work.

I am trying to use other name instead of "root" for UI. Basically don't want to display "root" on UI. I tried following way, but it not worked for me.

1. JSONEditor.defaults.options.form_name_root = "newUI";
2. jsonUI = new JSONEditor($editor, {
   schema: Schema,
   startval: initialData,
   form_name_root:"newUI"
   });

I am suspecting issue in line#1434. it is not replacing the string.
if (this.jsoneditor.options.form_name_root) this.formname = this.formname.replace(/root^[/,this.jsoneditor.options.form_name_root+'[');

if(schema.$ref && typeof schema.$ref !== "object" && schema.$ref.substr(0,1) !== "#" && schema.$ref.substr(0,3) !== "urn" && !this.refs[schema.$ref]) { refs[schema.$ref] = true; }

A new oneOf array is not being created before merging schema. See:

Unfortunately this may be a breaking change since folks may have been relying on this behaviour. For instance the Validator doesn't currently expand schema, however this mutation may have been an unintentional work around.

@loganvolkers I thought about keeping examples instead of docs for the .html files. They are examples, aren't they?

If we have a docs folder, I'd rather use markdown in there and maybe move some stuff from the README over there.

WDYT?

Hi

I may be missing something, but I can't find this in the documentation.

I can't find any option that will trigger a validation error if at least one option in a select (checkbox or multi-select list) is not chosen, or how to trigger an error when a required number field is empty (minLength helps with strings, but for numbers validation doesn't seem to persist).

Are there docs that explain special scenarios for validation? I can't find them. I imagine that jsonschema rules are followed but these don't seem to be covered.

According to the README I can specify my own CSS styles, but I cannot find the way to specify CSS classes for elements in json schema.

If you want to specify your own styles with CSS, you can use barebones, which includes almost no classes or inline styles.

Can we add something similar to

"style": {
      "add": "btn-success"
    }

to element meta information in json schema?
Also see jdorn/json-editor#158 (comment)

This library is currently exported using:

 window.JSONEditor = JSONEditor;

This makes it incompatible with build systems like Webpack and Rollup.

Instead the library should be exported as a UMD module, so that it can be properly released to NPM.

Note: UMD modules should mostly maintain backwards compatibility with export a global object on the window, but it may break some things. Because of this, if we include this change, it should result in a version bump to keep our releases in line with Semver.

For example:

https://github.com/niebert/json-editor @niebert

https://github.com/mehmetb/json-editor @mehmetb

https://github.com/dmstr-forks/jdorn-json-editor @dmstr-forks @Kanabanarama

https://github.com/Syzygy24/y-jsoneditor @Syzygy24

https://github.com/AppWorkshop/json-editor @laurenthuron

https://github.com/TJKoury/json-editor/tree/dev @TJKoury

Tests on travis are currently failing, ie. https://travis-ci.org/json-editor/json-editor/builds/337365783

Hello

Surely having a human readable title for each field is a good thing, however there are times when it is not enough. Having a small text that describes the field or the form section is very useful and sometimes is mandatory.
Placeholders play an essential role too.

This isn't really an issue, I'm just a noob.

I'm trying to add in a basic json editor into my vue component but am getting 'TypeError: editor.setValue is not a function'. I'm assuming I'm missing an import or something.

Any help for a learner is appreciated :)

Hi guys, thanks for bringing this to live!
I tried to build this code but without luck. is it possible to have a new working min release?

There's a few things to do to make this fork more official.

• Release a new version on NPM (Using semver plz)
• Setup a .github folder tool
• Comment on individual issues and PRs and request people move their issues to the new repo
• Talk to @jdorn if he ever returns from the dead
• Setup protected branches
• Submit an application to the JsFoundation: https://js.foundation/
• Write a blog article about the above

jdorn/json-editor is deprecated, we're referencing some open issues here.

Appears to be a missing closing bracket:

   src/editors/object.js
    713 |  },
            ^ Expected an identifier and instead saw ','.

First of all, json-editor is a dream come true... thanks!

With my particular use-case (Android app, but with non-Android contexts too), colour strings are in the form #aarrggbb rather than #rrggbb. where aa is the hex alpha (transparency) value.

Does json-editor allow for this? Something like the following (with a colour picker, including alpha, popping up in this context):

"favorite_color": {
  "type": "string",
  "format": "color",
  "title": "favorite color",
  "default": "#aaffa500"
},

I'm looking to write an Angular4/5 wrapper for this project and was wondering if I should use this as the starting point or the original jdorn one?

I'd like to have an editor letting users design the json schema, which could be used to produce the json-editor as the project.
i.e. the super json schema -> editor for json schema -> editor for json

Hi, I have the object like this:

"events": {
	"type": "array",
	"uniqueItems": true,
	"format": "checkbox",
	"minLength": 1,
	"items":{
		"type": "string",
		"enum": ["Induction event","Shipping event"]
	},
	"default": ["Induction event","Shipping event"]
}

I'd like to have a possibility to get mapped from title to values array from the checkbox array object according to the following map:

"eventsToValuesMAP": {
	"Induction event": "IND",
	"Shipping event": "SHP"
}

How to properly define the "events" to get desired effect?
Thank you in advance.

As a user, when using:

"files": {
  "type": "string",
  "format": "file",
  "title": "Files"
}

any uploaded file has a /fakepath/ to it.

How to get the real path?

Is Bootstrap 4 theme allowed? It's not working for me. I get: ERROR Unknown theme bootstrap 4. I don't have problems with other themes.

Thank you for the awesome work.

If an array's enum's default is { }, and you delete any array element, you're unable to select the enum anymore.

Related: jdorn/json-editor#813

I'm designing an office data-config-system by using this lib,
hope to understand your apply ideas !

Is there a way to track what has actually been updated with the on change event handler? I tried something like this, but the event comes back undefined:

editor.on('change',function(event) { console.log(event) });

I would like to be able to track incremental changes rather than submitting a full json object.

I have an angular app and want to use json-editor along with it. I am using require.js to load my dependencies, how can I do the same with json-editor? Is it possible to do this?

hi!
$.ajax({ url: "/get/form", }).done(function (result) { var editor = new JSONEditor($("#form"),{ },result.schema ) });
got error Uncaught Error: element should be an instance of Element

url /get/form return

{"schema":{"type":"object","id":"urn:jsonschema:document:domain:Application","properties":{"id":{"type":"integer"},"clientFirstName":{"type":"string","title":"Имя","maxLength":30,"minLength":3},"clientSecondName":{"type":"string","title":"Фамилия","maxLength":30,"minLength":3},"clientPatronomicName":{"type":"string","title":"Отчество","maxLength":30,"minLength":3}}},"form":[{"key":"clientFirstName","description":"Имя клиента","placeholder":"Введите ваше имя"},{"key":"clientPatronomicName","description":"Отчество клиента","placeholder":"Введите ваше отчество"},{"key":"clientSecondName","description":"Фамилия клиента","placeholder":"Введите вашу фамилию"}]}

I am making an editor for a schema where there are a large number of additional properties with arbitrary names (a large database-like map of values), and I can't find a way to get them sorted. I can't use propertyOrder, since these are additional properties whose names are not known ahead of time.

I believe it would be solvable by adding an option for alphabetical property sorting, or a way to supply a custom sort function to use to sort object editors.

I've just noticed it's possible to trigger the submit event skipping the change event.

The editor's value seems to only be updated on change event (and to bubble the change event).

What's the easiest way to have the editor update its value on change -as it happens- ?

Are there any plans to create a json-editor React.js component?

Thanks!

Details:
hapijs/hoek#247
hapijs/hoek#230 (comment)

I have tried many different options but still could not figure it out. I want to create a form with 2 columns but always get three columns no matter where I put the grid_columns option. I have linked the bootstrap 4 css and js files (the standard bootstrap4 template).
Here is the code to create the form:

 var editor = new JSONEditor(document.getElementById('editor_holder'), {
         disable_collapse: true,
         disable_edit_json: true,
         disable_properties: true,
         no_additional_properties: true,
         

         // Enable fetching schemas via ajax
         ajax: true,
         object_layout: "grid",
         grid_columns: 2,
         theme: "bootstrap4",
         // The schema for the editor
         schema: {
             $ref: "/resources/application.json",
         },

         
         // Seed the form with a starting value
         //startval: starting_value
     });

The json file is simple:

{
  "title": "Application",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "title": "Name:",
      "minLength": 5
    },

    "dob": {
      "type": "string"
    },
    "gender": {
      "type": "string"
    },
    "country": {
      "type": "string"
    },

    "program": {
      "type": "string"
    },
    "degree": {
      "type": "string"
    },
    "interests": {
      "type": "string"
    },
    "ug_university": {
      "type": "string"
    },
    "ug_major": {
      "type": "string"
    }
  }
  
}

Thank you for your time and help!

When using the array format the Add Button appears at the bottom of the list of current items, how do I go about moving it to the top. The list of items in my list is going to get long and I would like to make it so that I don't have to scroll all the way down to the button..

The Selectize link in README.md is broken (404). This is the correct link:

https://selectize.github.io/selectize.js/

Should I just go in and make the change?

@loganvolkers What's the state of the branches "docs" and "v1.0.0"?

Could I merge them into master, along with updated testing from https://github.com/json-editor/json-editor/tree/feature/testing

I also think it would be good to remove dist from master/develop since it requires running grunt all the time.

Let me know if there are any objections from your side.

"collasped": true does not work in definitions. Sample schema:

{
  "type": "object",
  "properties": {
    "foo": {
      "$ref": "#/definitions/foo"
    },
    "bar": {
      "$ref": "#/definitions/bar"
    }
  },
  "definitions": {
    "foo": {
      "type": "object",
      "options": {
        "collapsed": true
      }
    },
    "bar": {
      "type": "array",
      "options": {
        "collapsed": true
      }
    }
  }
}

Enum could be set only with value = label, on select options.
Is there a way where schema could be set to get a different value than label to export on json?

Hi

is this functionality working in this version?

`// Disable entire form
editor.disable();

// Disable part of the form
editor.getEditor('root.location').disable();

// Enable entire form
editor.enable();

// Enable part of the form
editor.getEditor('root.location').enable();

// Check if form is currently enabled
if(editor.isEnabled()) alert("It's editable!");`

I'm getting this error: Uncaught TypeError: Cannot read property 'disable' of undefined at f.disable (jsoneditor.min.js:95)

Thanks

Hello,

This issue is a duplicate of the one I wrote on the original jdorn-json-editor repository.
It's a fairly basic problem that I haven't been able to solve:
When I create my form from my schema, adding the data from my data object, only the elements in the form that actually has data are shown (expanded). I need to click on Object Properties in the form and check the additional elements I want to show.

I was advised to use this call:
editor.root.setValue(data, true);

But I wasn't able to get it to work. Can anyone please help me out a bit more with how to use that?
I tried with:
editor.root.setValue(my_object_with_data, true);
... but not sure what I'm doing wrong.

Thanks in advance!

I've been struggling with the "grid" and "grid_columns" options – perhaps I am using them wrong?

For example, in the image and schema below, I expected the fields "Shade Label" and "Shade Label Color" to wrap to a new row since they can't fit on the first row.

Is this Bootstrap related? I'm no Bootstrap hero . . can anyone give me the 300 word primer? How do I specify rows within my json schema?

{
    "title": "Shades",
    "description": "Shaded Regions in the Timeline",
    "type": "array",
    "format": "tabs",
    "items": {
        "type": "object",
        "title": "Shade",
        "id": "shade",
        "format": "grid",
        "properties": {
            "startDate": {
                "title": "Shade Start Date",
                "type": "string",
                "format": "datetime-local",
                "options": {
                    "input_width": "200px",
                    "grid_columns": 2
                }
            },
            "endDate": {
                "title": "Shade End Date",
                "type": "string",
                "format": "datetime-local",
                "options": {
                    "input_width": "200px",
                    "grid_columns": 2
                }
            },
            "shadeColor": {
                "type": "string",
                "title": "Shade Color",
                "format": "spectrum",
                "spectrum": {
                    "showPalette": true,
                    "showButtons": true,
                    "showAlpha": true,
                    "showInitial": true,
                    "preferredFormat": "rgb"
                },
                "options": {
                    "input_width": "230px",
                    "grid_columns": 2
                },
                "default": "rgba(0, 255, 0, .5)"
            },
            "shadeLabel": {
                "type": "string",
                "title": "Shade Label",
                "description": "Optional text label to display"
            },
            "shadeLabelColor": {
                "type": "string",
                "title": "Shade Label Color",
                "format": "spectrum",
                "spectrum": {
                    "showPalette": true,
                    "showButtons": true,
                    "showAlpha": false,
                    "showInitial": true,
                    "preferredFormat": "rgb"
                },
                "options": {
                    "input_width": "230px",
                    "grid_columns": 2
                },
                "default": "rgba(255, 255, 255)"
            }
        }
    },
    "required": [
        "endDate",
        "startDate",
        "shade_color"
    ]
}

I want to to add a listener watch() to a select that belongs to a repetitive object. This means when a new row is added, the watch() to the new select has to be added to, with the specific path with the new row index

My first thought was to find a way to attach a listener on "+ row " button click(), to implement this:

editor.watch('root.0.mySelect',function()  . . . 
editor.watch('root.1.mySelect',function()  . . . 
editor.watch('root.2.mySelect',function()  . . . 

but this button shares css class with other + row for other objects, so it's hard to identify and then get the row index

Any idea how this could be implemented? Do I need to go to JQuery approach instead?