nxt-components
Github

Angular JSON viewer

GitHub license  npm  scope

An interactive JSON view component for Angular.


Demo

Basic usage

View on GitHub
Object 
<nxt-json-view [data]="data"></nxt-json-view>
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-basic-example',
    templateUrl: './basic-example.component.html',
    styleUrls: ['./basic-example.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class BasicExampleComponent {
    data = {
        name: 'twp0217',
        url: 'https://github.com/twp0217',
        string: 'github',
        number: 88,
        boolean: true,
        object: {
            obj1: 'obj1',
            obj2: 'obj2',
            object: {
                obj11: 'obj11',
                obj22: 'obj22'
            },
            emptyArray: []
        },
        array: [
            1,
            2,
            3
        ],
        null: null
    }
}

With expansion parameters

View on GitHub
Object
name: twp0217
url: https://github.com/twp0217
string: github
number: 88
boolean: true
object: Object
array: Array [ 3 ]
null: null
<nxt-json-view [data]="data"
    [levelOpen]="0"></nxt-json-view>

With level labels

View on GitHub
Object
name: twp0217
url: https://github.com/twp0217
string: github
number: 88
boolean: true
object: My label
array: Array [ 3 ]
null: null
<nxt-json-view [data]="data"
    [levelOpen]="0"
    [levelLabels]="levelLabels"></nxt-json-view>
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-level-labels',
    templateUrl: './level-labels.component.html',
    styleUrls: ['./level-labels.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class LevelLabelsComponent {
    data = {
        name: 'twp0217',
        url: 'https://github.com/twp0217',
        string: 'github',
        number: 88,
        boolean: true,
        object: {
            obj1: 'obj1',
            obj2: 'obj2',
            object: {
                obj11: 'obj11',
                obj22: 'obj22'
            },
            emptyArray: []
        },
        array: [
            1,
            2,
            3
        ],
        null: null
    }
 
    levelLabels: { [level: number]: { [key: string]: string } } = {
        1: { object: 'My label' }
    }
}

Live test

View on GitHub

Object 
<textarea class="form-control"
    rows="15"
    [ngModel]="jsonString"
    (ngModelChange)="load($event)"></textarea>
<br>
<nxt-json-view *ngIf="!invalidInput; else warning"
    [data]="data"
    [levelOpen]="1"></nxt-json-view>
<ng-template #warning>
    <p>Failed to parse input string; please enter valid JSON</p>
</ng-template>
import { Component, ViewEncapsulation } from '@angular/core'
 
@Component({
    selector: 'app-live-test',
    templateUrl: './live-test.component.html',
    styleUrls: ['./live-test.component.css'],
    encapsulation: ViewEncapsulation.Emulated
})
export class LiveTestComponent {
    data = {}
    jsonString = JSON.stringify(this.data)
 
    invalidInput = false
 
    load(value: string) {
        this.jsonString = value
        try {
            this.data = JSON.parse(this.jsonString)
            this.invalidInput = false
        } catch (_e) {
            this.invalidInput = true
        }
    }
}