ember-jsoneditor

Ember component for JSON Editor to view, edit and format JSON.

Live demo: http://glavin001.github.io/ember-jsoneditor/

Compatibility

• Ember.js v3.4 or above
• Ember CLI v2.13 or above
• Node.js v10 or above

Previous versions compatibility

• ember-json-editor v9.3 - Ember.js 2.4 and above

Installation

ember install ember-jsoneditor

Usage

<JsonEditor @json={{this.model}} @mode={{this.mode}} @name={{this.name}} />

For Ember versions < 3.4, you need to use classic component invocation:

{{json-editor json=model mode=mode name=name}}

For a complete example, see the dummy test app in tests/dummy/app/.

Documentation

See jsoneditor for configuration details. ember-jsoneditor supports the following jsoneditor options:

Option | Description | Default ------------|-----------------------------------------------------------------------------------|------------ change | maps to jsoneditor's onChange event | null error | maps to jsoneditor's onError event | null expand | if true, renders with json tree expanded | false history | Enables history undo/redo button | true indentation | number of indentation spaces | 2 mode | Editor mode - modes | tree modes | Drop down to select editor mode. Options: 'tree', 'view', 'form', 'code', 'text' | All options name | Field name for the JSON root node, | null search | boolean - show editor search box | true

Example using event options

{{!-- app/templates/application.hbs --}}

<JsonEditor 
  @json={{this.model}} 
  @mode={{this.mode}} 
  @name={{this.name}} 
  @change={{action 'itChanged'}} 
  @error={{action 'myError'}} 
/>

// app/controllers/application.js
import Controller from '@ember/controller';

export default Controller.extend({
   /// ....
   actions: {
    myError(error){
      alert(`Error: ${error}`)
    },

    itChanged() {
      alert("The Data Changed!");
    }
  }
})

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.