dl-json-viewer

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.