devmark / ngx-jsoneditor Goto Github PK

View Code? Open in Web Editor NEW

8.0 3.0 8.0 9 KB

a wrapper for json editor(http://jsoneditoronline.org)

TypeScript 56.15% JavaScript 43.85%

json-editor angular json editor

ngx-jsoneditor's Introduction

ngx-jsoneditor

Installation

Include JSONEditor css/js in your application :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.6.0/jsoneditor.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/5.6.0/jsoneditor.min.js"></script>

To install this library, run:

$ npm install ngx-jsoneditor --save

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install ngx-jsoneditor

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { JSONEditorModule } from 'ngx-jsoneditor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Specify your library as an import
    JSONEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

import { Component } from '@angular/core';

@Component({
  selector: 'sample',
  template: `
  <json-editor
    [(ngModel)]="jsonContent"
    jsonModal #staticModal="json-modal"
    [config]="{sortObjectKeys: true}"
    (change)="onChange($event)">
  </json-editor>

    <button (click)="staticModal.collapseAll()">collapseAll</button>
    <button (click)="staticModal.expandAll()">expandAll</button>
  `
})
export class Sample{
  constructor(){
    this.jsonContent = {
        "Array": [1, 2, 3],
        "Boolean": true,
        "Null": null,
        "Number": 123,
        "Object": {"a": "b", "c": "d"},
        "String": "Hello World"
    };
  }
  onChange(value){
      
  }
}

Configuration

config : The configuration object for JSONEditor see https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#configuration-options

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © DevMark

ngx-jsoneditor's People

Stargazers

Watchers

Forkers

kirtikachouhan echron zhucl1006 selaa-online cintolas atmman merlinwt prashantguleria

ngx-jsoneditor's Issues

Does not work with reactive forms

When using with formControlName, the editor is always empty

Requiring jsoneditor instead of manual import

I believe it would be a lot easier if you used in the component:

import { JSONEditor } from 'jsoneditor';

and also users could get the styles from

@import "~jsoneditor/dist/jsoneditor.min.css";

This would work by adding jsoneditor as a dependency. Including the libraries from the CDN is not really the angular/npm way

Issue of creating the array

Hello,
I'm found some issue when I try to create array.
When I'm creating new field and set up the "type" - "Array" - I cannot add any items in the array.
Probably I was making something wrong, could you test it please.

Thank you,
Alex

Calling a function does not work

Hey,

I am using your wrapper in my project. Everything works fine but I can't call a function like you do in your example. This is my code:

<div *ngIf="editorShown">
  <json-editor [(ngModel)]="signatureContent" 
    jsonModal #editorModal="json-modal" 
    [config]="editorConfig" 
    (change)="onEditorChange()">
  </json-editor>
</div>
<button (click)="editorModal.get()" class="btn btn-primary" type="button">get</button>

It throws the following error:
TypeError: t.component.editorModal is undefined

I want to use the get()-function because I have a json-schema to validate the content.

Catching errors

When there is an error in the json, is there a way to catch it? even by using (error)="onError(event), the code always throws this error:

textmode.js:324 Error in onChange callback:  Error: Parse error on line 8:
...inputString",      },      {        "
----------------------^
Expecting 'STRING', got '}'
    at Object.parseError (jsonlint.js:55)
    at Object.parse (jsonlint.js:132)
    at Object.validate (util.js:223)
    at Object.parse (util.js:17)
    at JSONEditor.textmode.get (textmode.js:526)
    at Object.onChange (index.js:46)
    at JSONEditor.textmode._onChange (textmode.js:321)
    at Editor.EventEmitter._signal (index.js:3865)
    at Editor.onDocumentChange (index.js:13292)
    at EditSession.EventEmitter._signal (index.js:3865)

And therefore we never actually catch any errors.

Missing in Readme: FormsModule is needed

The tag can only be used if the FormsModule was imported in the app module, especially when including the ngModel binding. If the FormsModule is not imported, I get this error:
Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'json-editor'.

Please add this to your Readme file.

Error when initializing JSONEditor

this.instance = new JSONEditor(this.host.nativeElement, newConfig);

This line throws me the following error:

ERROR ReferenceError: JSONEditor is not defined
at JSONEditorComponent.webpackJsonp.../../../../ngx-jsoneditor/index.js.JSONEditorComponent.editorInit