nxt-components logo 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>

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>

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>