Neanderthal Painting Monet

    dl-json-viewer

    1.0.0 • Public • Published

    JSON Viewer for Angular

    A module which renders or displays a JSON object in proper indentation (or beautified form) in an Angular application.

    Build

    Run ng build dl-json-viewer to build the project. The build artifacts will be stored in the projects/dl-json-viewer/dist/ directory.

    Installation

    NPM

    npm i dl-json-viewer-angular

    Usage

    Import

    Add DLJSONViewerModule to your application's or module's imports. For example to import the module to your application, app.module.ts should have the following:

    import { DLJsonViewerModule } from 'dl-json-viewer';
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        DLJsonViewerModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })

    Use

    Add the lib-dl-json-viewer directive/element to your component with the appropriate inputs to render the object.

    <lib-dl-json-viewer [obj]="jsonObj" [tab-space]="4" [config]="config"></lib-dl-json-viewer>

    The above code snippet will show the object jsonObj (in the current component's members) with an indentation of 4 spaces.

    Component Inputs

    Input Type Description
    obj any The JSON object or array or native to be rendered by the component.
    tab-space number The number of spaces to use for indentation.
    config any The configuration object. See Configuration for more information.

    Configuration

    The configuration object contains the following properties:

    Property Type Description
    marker object The object which contains strings to demarcate an object or array.
    marker.array object The object which contains strings to demarcate an array.
    marker.array object The object which contains strings to demarcate an object.
    marker.array.separator string The string which separates elements in an array.
    marker.array.open string The string which indicates the start of an array.
    marker.array.close string The string which indicates the end of an array.
    marker.object.separator string The string which separates elements (key-value pair) in an object.
    marker.object.keyValueSeparator string The string which separates the key from value in an element.
    marker.object.open string The string which indicates the start of an object.
    marker.object.close string The string which indicates the end of an object.

    Below is the object structure and the default values:

    const DefaultConfig: any = {
        "markers": {
            "array": {
                "separator": ",",
                "open": "[",
                "close": "]"
            },
            "object": {
                "separator": ",",
                "open": "{",
                "close": "}",
                "keyValueSeparator": ":"
            }
        }
    };

    The default values for the configuration is the DefaultConfig object which can be found in the default.config.ts file.

    Demo

    This application is a demonstration of the use of the component. The app component contains the jsonObj field which is passed as input to json of the component. This object is bound (two-way) to the text-area input in the view, so when there is text input in the text-area and the View button is clicked then the viewJSON method in the app component is called which updates the input of the JSON viewer component and the object is then rendered in the view. To run the application use the Angular CLI command:

    ng serve

    Documentation

    The documentation for this project is generated using Compodoc tool. You can find the documentation at doc/index.html.

    Install

    npm i dl-json-viewer

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    2.99 MB

    Total Files

    147

    Last publish

    Collaborators

    • damelyngdoh