ng-json-view
Version:
A JSON View component for Angular 10+
94 lines • 11 kB
JavaScript
import { Component, Input } from '@angular/core';
import { isUndefined, isObject, isArray, isString, isNumber, isBoolean } from '../utils/utils';
export class JsonViewComponent {
constructor() {
this.level = 0;
this.isOpen = false;
this.hasChildren = false;
this.isObject = false;
this.isArray = false;
this.isInit = false;
this._levelLabels = {};
}
set data(data) {
this._data = data;
this.isInit && this.init();
}
get data() { return this._data; }
ngOnInit() {
this.init();
this.isInit = true;
}
init() {
this.levelLabelHandle();
this.levelOpenHandle();
this.childrenKeysHandle();
this.dataHandle();
}
levelLabelHandle() {
if (this.levelLabels !== undefined) {
this._levelLabels = this.levelLabels[this.level] || {};
}
}
levelOpenHandle() {
if (!isUndefined(this.levelOpen)) {
(this.level <= this.levelOpen) && (this.isOpen = true);
}
}
childrenKeysHandle() {
if (isObject(this.data)) {
this.childrenKeys = Object.keys(this.data);
this.childrenKeys && this.childrenKeys.length && (this.hasChildren = true);
}
}
dataHandle() {
if (isObject(this.data)) {
this.isObject = true;
this.dataType = "Object";
if (isArray(this.data)) {
this.isArray = true;
this.dataType = "Array";
}
if (this._levelLabels[this.key]) {
this.dataType = this._levelLabels[this.key];
}
}
else {
this.value = this.data;
if (isString(this.data)) {
this.valueType = "string";
}
else if (isNumber(this.data)) {
this.valueType = "number";
}
else if (isBoolean(this.data)) {
this.valueType = "boolean";
}
else if (null === this.data) {
this.valueType = "null";
this.value = "null";
}
}
}
toggle() {
if (!(this.childrenKeys && this.childrenKeys.length)) {
return;
}
this.isOpen = !this.isOpen;
}
}
JsonViewComponent.decorators = [
{ type: Component, args: [{
selector: 'json-view',
template: "<div class=\"json-view\">\n <a (click)=\"toggle()\">\n <span class=\"toggler\" [ngClass]=\"{'collapse': isOpen, 'expand': !isOpen}\" [style.visibility]=\"hasChildren?'visible':'hidden'\"></span>\n <span class=\"key\" *ngIf=\"key\">\n <span>{{key}}</span>\n <span>: </span>\n </span>\n <span class=\"value\">\n <span *ngIf=\"isObject\">\n {{ dataType }}\n <span *ngIf=\"isArray\">[ {{ $any(data)?.length }} ]</span>\n </span>\n <span *ngIf=\"!isObject\" [ngClass]=\"valueType\">{{ value }}</span>\n </span>\n </a>\n <div class=\"children\" *ngIf=\"hasChildren && isOpen\">\n <json-view *ngFor=\"let _key of childrenKeys\" [data]=\"data[_key]\" [key]=\"_key\" [level]=\"level+1\" [levelOpen]=\"levelOpen\" [levelLabels]=\"levelLabels\"></json-view>\n </div>\n</div>",
styles: [".json-view a{cursor:pointer;text-decoration:none}.json-view .toggler{display:block;float:left;padding:0;text-align:center;width:1em}.json-view .collapse:before{content:\"-\"}.json-view .expand:before{content:\"+\"}.json-view .key{color:#92278f}.json-view .value{color:#000}.json-view .value .string{color:#3ab54a}.json-view .value .number{color:#25aae2}.json-view .value .boolean{color:#aa0d91}.json-view .value .null{color:#f1592a}.json-view .children{margin-left:1em}"]
},] }
];
JsonViewComponent.propDecorators = {
data: [{ type: Input }],
key: [{ type: Input }],
level: [{ type: Input }],
levelOpen: [{ type: Input }],
levelLabels: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNvbi12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL25neC1qc29uLXZpZXcvc3JjL2NvbXBvbmVudC9qc29uLXZpZXcuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBRXpELE9BQU8sRUFBRSxXQUFXLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBTy9GLE1BQU0sT0FBTyxpQkFBaUI7SUFMOUI7UUFjVyxVQUFLLEdBQVcsQ0FBQyxDQUFDO1FBSTNCLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFFeEIsZ0JBQVcsR0FBWSxLQUFLLENBQUM7UUFJN0IsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUMxQixZQUFPLEdBQVksS0FBSyxDQUFDO1FBQ3pCLFdBQU0sR0FBWSxLQUFLLENBQUM7UUFDeEIsaUJBQVksR0FBRyxFQUFFLENBQUM7SUFrRXBCLENBQUM7SUF0RkMsSUFDSSxJQUFJLENBQUMsSUFBWTtRQUNuQixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQztRQUNsQixJQUFJLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUM3QixDQUFDO0lBQ0QsSUFBSSxJQUFJLEtBQWEsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztJQWlCekMsUUFBUTtRQUNOLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNaLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxJQUFJO1FBQ0YsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFDeEIsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxDQUFDO1FBQzFCLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRUQsZ0JBQWdCO1FBQ2QsSUFBSSxJQUFJLENBQUMsV0FBVyxLQUFLLFNBQVMsRUFBRTtZQUNsQyxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUN4RDtJQUNILENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEVBQUU7WUFDaEMsQ0FBQyxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLENBQUM7U0FDeEQ7SUFDSCxDQUFDO0lBRUQsa0JBQWtCO1FBQ2hCLElBQUksUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRTtZQUN2QixJQUFJLENBQUMsWUFBWSxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQzNDLElBQUksQ0FBQyxZQUFZLElBQUksSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxDQUFDO1NBQzVFO0lBQ0gsQ0FBQztJQUVELFVBQVU7UUFDUixJQUFJLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFDdkIsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7WUFDckIsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7WUFDekIsSUFBSSxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFO2dCQUN0QixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztnQkFDcEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxPQUFPLENBQUM7YUFDekI7WUFDRCxJQUFJLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFO2dCQUMvQixJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO2FBQzdDO1NBQ0Y7YUFBTTtZQUNMLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQztZQUN2QixJQUFJLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEVBQUU7Z0JBQ3ZCLElBQUksQ0FBQyxTQUFTLEdBQUcsUUFBUSxDQUFDO2FBQzNCO2lCQUFNLElBQUksUUFBUSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsRUFBRTtnQkFDOUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUM7YUFDM0I7aUJBQU0sSUFBSSxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFO2dCQUMvQixJQUFJLENBQUMsU0FBUyxHQUFHLFNBQVMsQ0FBQzthQUM1QjtpQkFBTSxJQUFJLElBQUksS0FBSyxJQUFJLENBQUMsSUFBSSxFQUFFO2dCQUM3QixJQUFJLENBQUMsU0FBUyxHQUFHLE1BQU0sQ0FBQztnQkFDeEIsSUFBSSxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUM7YUFDckI7U0FDRjtJQUNILENBQUM7SUFFRCxNQUFNO1FBQ0osSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksSUFBSSxJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sQ0FBQyxFQUFFO1lBQ3BELE9BQU87U0FDUjtRQUNELElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQzdCLENBQUM7OztZQTNGRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFdBQVc7Z0JBQ3JCLHczQkFBeUM7O2FBRTFDOzs7bUJBR0UsS0FBSztrQkFNTCxLQUFLO29CQUNMLEtBQUs7d0JBQ0wsS0FBSzswQkFDTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IGlzVW5kZWZpbmVkLCBpc09iamVjdCwgaXNBcnJheSwgaXNTdHJpbmcsIGlzTnVtYmVyLCBpc0Jvb2xlYW4gfSBmcm9tICcuLi91dGlscy91dGlscyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2pzb24tdmlldycsXG4gIHRlbXBsYXRlVXJsOiAnLi9qc29uLXZpZXcuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9qc29uLXZpZXcuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBKc29uVmlld0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIHByaXZhdGUgX2RhdGE6IG9iamVjdDtcbiAgQElucHV0KClcbiAgc2V0IGRhdGEoZGF0YTogb2JqZWN0KSB7XG4gICAgdGhpcy5fZGF0YSA9IGRhdGE7XG4gICAgdGhpcy5pc0luaXQgJiYgdGhpcy5pbml0KCk7XG4gIH1cbiAgZ2V0IGRhdGEoKTogb2JqZWN0IHsgcmV0dXJuIHRoaXMuX2RhdGE7IH1cbiAgQElucHV0KCkga2V5OiBzdHJpbmc7XG4gIEBJbnB1dCgpIGxldmVsOiBudW1iZXIgPSAwO1xuICBASW5wdXQoKSBsZXZlbE9wZW46IG51bWJlcjtcbiAgQElucHV0KCkgbGV2ZWxMYWJlbHM6IHsgW2tleTogbnVtYmVyXTogeyBba2V5OiBzdHJpbmddOiBzdHJpbmcgfSB9O1xuXG4gIGlzT3BlbjogYm9vbGVhbiA9IGZhbHNlO1xuICBjaGlsZHJlbktleXM6IHN0cmluZ1tdO1xuICBoYXNDaGlsZHJlbjogYm9vbGVhbiA9IGZhbHNlO1xuICBkYXRhVHlwZTogc3RyaW5nO1xuICB2YWx1ZTogYW55O1xuICB2YWx1ZVR5cGU6IHN0cmluZztcbiAgaXNPYmplY3Q6IGJvb2xlYW4gPSBmYWxzZTtcbiAgaXNBcnJheTogYm9vbGVhbiA9IGZhbHNlO1xuICBpc0luaXQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgX2xldmVsTGFiZWxzID0ge307XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5pbml0KCk7XG4gICAgdGhpcy5pc0luaXQgPSB0cnVlO1xuICB9XG5cbiAgaW5pdCgpIHtcbiAgICB0aGlzLmxldmVsTGFiZWxIYW5kbGUoKTtcbiAgICB0aGlzLmxldmVsT3BlbkhhbmRsZSgpO1xuICAgIHRoaXMuY2hpbGRyZW5LZXlzSGFuZGxlKCk7XG4gICAgdGhpcy5kYXRhSGFuZGxlKCk7XG4gIH1cblxuICBsZXZlbExhYmVsSGFuZGxlKCkge1xuICAgIGlmICh0aGlzLmxldmVsTGFiZWxzICE9PSB1bmRlZmluZWQpIHtcbiAgICAgIHRoaXMuX2xldmVsTGFiZWxzID0gdGhpcy5sZXZlbExhYmVsc1t0aGlzLmxldmVsXSB8fCB7fTtcbiAgICB9XG4gIH1cblxuICBsZXZlbE9wZW5IYW5kbGUoKSB7XG4gICAgaWYgKCFpc1VuZGVmaW5lZCh0aGlzLmxldmVsT3BlbikpIHtcbiAgICAgICh0aGlzLmxldmVsIDw9IHRoaXMubGV2ZWxPcGVuKSAmJiAodGhpcy5pc09wZW4gPSB0cnVlKTtcbiAgICB9XG4gIH1cblxuICBjaGlsZHJlbktleXNIYW5kbGUoKSB7XG4gICAgaWYgKGlzT2JqZWN0KHRoaXMuZGF0YSkpIHtcbiAgICAgIHRoaXMuY2hpbGRyZW5LZXlzID0gT2JqZWN0LmtleXModGhpcy5kYXRhKTtcbiAgICAgIHRoaXMuY2hpbGRyZW5LZXlzICYmIHRoaXMuY2hpbGRyZW5LZXlzLmxlbmd0aCAmJiAodGhpcy5oYXNDaGlsZHJlbiA9IHRydWUpO1xuICAgIH1cbiAgfVxuXG4gIGRhdGFIYW5kbGUoKSB7XG4gICAgaWYgKGlzT2JqZWN0KHRoaXMuZGF0YSkpIHtcbiAgICAgIHRoaXMuaXNPYmplY3QgPSB0cnVlO1xuICAgICAgdGhpcy5kYXRhVHlwZSA9IFwiT2JqZWN0XCI7XG4gICAgICBpZiAoaXNBcnJheSh0aGlzLmRhdGEpKSB7XG4gICAgICAgIHRoaXMuaXNBcnJheSA9IHRydWU7XG4gICAgICAgIHRoaXMuZGF0YVR5cGUgPSBcIkFycmF5XCI7XG4gICAgICB9XG4gICAgICBpZiAodGhpcy5fbGV2ZWxMYWJlbHNbdGhpcy5rZXldKSB7XG4gICAgICAgIHRoaXMuZGF0YVR5cGUgPSB0aGlzLl9sZXZlbExhYmVsc1t0aGlzLmtleV07XG4gICAgICB9XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMudmFsdWUgPSB0aGlzLmRhdGE7XG4gICAgICBpZiAoaXNTdHJpbmcodGhpcy5kYXRhKSkge1xuICAgICAgICB0aGlzLnZhbHVlVHlwZSA9IFwic3RyaW5nXCI7XG4gICAgICB9IGVsc2UgaWYgKGlzTnVtYmVyKHRoaXMuZGF0YSkpIHtcbiAgICAgICAgdGhpcy52YWx1ZVR5cGUgPSBcIm51bWJlclwiO1xuICAgICAgfSBlbHNlIGlmIChpc0Jvb2xlYW4odGhpcy5kYXRhKSkge1xuICAgICAgICB0aGlzLnZhbHVlVHlwZSA9IFwiYm9vbGVhblwiO1xuICAgICAgfSBlbHNlIGlmIChudWxsID09PSB0aGlzLmRhdGEpIHtcbiAgICAgICAgdGhpcy52YWx1ZVR5cGUgPSBcIm51bGxcIjtcbiAgICAgICAgdGhpcy52YWx1ZSA9IFwibnVsbFwiO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHRvZ2dsZSgpIHtcbiAgICBpZiAoISh0aGlzLmNoaWxkcmVuS2V5cyAmJiB0aGlzLmNoaWxkcmVuS2V5cy5sZW5ndGgpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuaXNPcGVuID0gIXRoaXMuaXNPcGVuO1xuICB9XG5cbn0iXX0=