Ember-jsoneditor NPM

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!");
    }
  }
})