json-to-table-com
Version:
A JSON-to-Table Converter Package for Converting JSON Data into Tabular Format for Enhanced Visualization
200 lines (190 loc) • 13.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('json-to-table-com', ['exports', '/core', '@angular/common'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["json-to-table-com"] = {}, global.ng.core, global.ng.common));
})(this, (function (exports, i0, i1) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
// Author : Kavindu Yasintha Silva
var JsonToTableComponent = /** @class */ (function () {
// I initialize the json tree component.
function JsonToTableComponent(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
this.collapsedEntries = Object.create(null);
this.entryCount = 0;
this.isCollapsed = false;
this.value = "";
this.valueType = this.calculateType(this.value);
// this.changeDetectorRef.detectChanges()
}
// ---
// PUBLIC METHODS.
// ---
// I calculate the Type for the given value.
JsonToTableComponent.prototype.calculateType = function (target) {
if (target === null) {
return ("Null");
}
if (typeof (target) === "string") {
return ("String");
}
if (typeof (target) === "number") {
return ("Number");
}
if (typeof (target) === "boolean") {
return ("Boolean");
}
if (Array.isArray(target)) {
return ("Array");
}
return ("Object");
};
// I get called when the input bindings have been updated.
JsonToTableComponent.prototype.ngOnChanges = function () {
this.entryCount = 0;
this.isCollapsed = false;
this.valueType = this.calculateType(this.value);
this.clearCollapsedEntries();
if (this.valueType === "Object") {
this.entryCount = Object.keys(this.value).length;
}
else if (this.valueType === "Array") {
this.entryCount = this.value.length;
}
};
// I attempt to parse the current String value as a JSON payload.
// --
// NOTE: This overrides the passed-in state at this point in the JSON Tree.
JsonToTableComponent.prototype.parseString = function (event) {
if (!event.metaKey) {
return;
}
try {
this.value = JSON.parse(this.value);
this.ngOnChanges();
console.group("String Parsing");
console.log("The value was successfully parsed as JSON.");
console.log(this.value);
console.groupEnd();
}
catch (error) {
console.group("String Parsing");
console.warn("The value could not be parsed as JSON.");
console.error(error);
console.log(this.value);
console.groupEnd();
}
};
// I toggle the expansion of the given value.
JsonToTableComponent.prototype.toggle = function (index) {
// Top-level toggle.
if (index === undefined) {
this.isCollapsed = !this.isCollapsed;
// If we're collapsing the top-level value, then reset any settings for the
// sub-entry visibility.
if (this.isCollapsed) {
this.clearCollapsedEntries();
}
// Sub-entry toggle.
}
else {
this.collapsedEntries[index] = !this.collapsedEntries[index];
}
};
// ---
// PRIVATE METHODS.
// ---
// I clear the collapsed entries index.
JsonToTableComponent.prototype.clearCollapsedEntries = function () {
for (var key in this.collapsedEntries) {
delete (this.collapsedEntries[key]);
}
};
JsonToTableComponent.prototype.ngAfterViewInit = function () {
};
JsonToTableComponent.prototype.updateData = function (apiResponse) {
this.collapsedEntries = Object.create(null);
this.entryCount = 0;
this.isCollapsed = false;
this.value = apiResponse;
console.log(this.value);
this.valueType = this.calculateType(this.value);
// this.changeDetectorRef.detectChanges()
};
JsonToTableComponent.prototype.assertStringKey = function (key) {
return key;
};
JsonToTableComponent.prototype.ngOnInit = function () {
};
return JsonToTableComponent;
}());
JsonToTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: JsonToTableComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
JsonToTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: JsonToTableComponent, selector: "AutoJsonComponent", inputs: { value: "value" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div\n class=\"payload\"\n [ngSwitch]=\"valueType\">\n\n <ng-template ngSwitchCase=\"Null\">\n\n <ng-template [ngIf]=\"( ! isCollapsed )\">\n <div class=\"value is-null\">\n null\n </div>\n </ng-template>\n </ng-template>\n\n <ng-template ngSwitchCase=\"String\">\n\n <ng-template [ngIf]=\"( ! isCollapsed )\">\n <div class=\"value is-string\">\n <a (click)=\"parseString( $event )\">\n {{ value }}\n </a>\n </div>\n </ng-template>\n </ng-template>\n\n <ng-template ngSwitchCase=\"Number\">\n\n <ng-template [ngIf]=\"( ! isCollapsed )\">\n <div class=\"value is-number\">\n {{ value }}\n </div>\n </ng-template>\n </ng-template>\n\n <ng-template ngSwitchCase=\"Boolean\">\n\n <ng-template [ngIf]=\"( ! isCollapsed )\">\n <div class=\"value is-boolean\">\n {{ value }}\n </div>\n </ng-template>\n </ng-template>\n\n <ng-template ngSwitchCase=\"Array\">\n <div\n (click)=\"toggle()\"\n class=\"header is-array\"\n [class.is-collapsed]=\"isCollapsed\">\n <div class=\"type\">\n Array\n </div>\n <div class=\"entry-count\">\n Entries: {{ entryCount }}\n </div>\n </div>\n <ng-template [ngIf]=\"( ! isCollapsed )\">\n <ng-template ngFor let-subvalue let-index=\"index\" [ngForOf]=\"value\">\n <div\n (click)=\"toggle( index )\"\n class=\"label is-array\"\n [class.is-collapsed]=\"collapsedEntries[ index ]\">\n {{ index }}\n </div>\n <ng-template [ngIf]=\"( ! collapsedEntries[ index ] )\">\n <div class=\"value is-array\">\n <AutoJsonComponent [value]=\"subvalue\"></AutoJsonComponent>\n </div>\n </ng-template>\n </ng-template>\n </ng-template>\n </ng-template>\n\n <ng-template ngSwitchCase=\"Object\">\n\n <ng-template [ngIf]=\"!isCollapsed\">\n <ng-template ngFor let-subvalue [ngForOf]=\"value | keyvalue\">\n <div\n (click)=\"toggle(assertStringKey(subvalue.key))\"\n class=\"label is-object\"\n [class.is-collapsed]=\"collapsedEntries[assertStringKey(subvalue.key)]\">\n {{ subvalue.key }}\n </div>\n <ng-template [ngIf]=\"!collapsedEntries[assertStringKey(subvalue.key)]\">\n <div class=\"value is-object\">\n <AutoJsonComponent [value]=\"subvalue.value\"></AutoJsonComponent>\n </div>\n </ng-template>\n </ng-template>\n </ng-template>\n </ng-template>\n\n\n</div>\n", styles: [":host{display:block}.payload{display:inline-grid;grid-gap:0px;grid-template-columns:min-content;border:1px solid #dddddd;width:100%}.header{border:1px solid #dddddd;border-radius:3px;background-color:#dd0330;cursor:pointer;grid-column:1 / span 2;padding:6px}.header.is-null{background-color:#dd0330;border-color:#ddd}.header.is-string{background-color:#dd0330;border-color:#dd0330}.header.is-number{background-color:#df5e73;border-color:#df5e73}.header.is-boolean{background-color:#df5e73;border-color:#df5e73}.header.is-array{background-color:#e58494;border-color:#e58494}.header.is-object{background-color:#cc4c5c;border-color:#cc4c5c}.header.is-collapsed{background-color:#cc2c44;border-color:#cc2c44}.entry-count{margin-top:4px}.label{background-color:#ddd;border:1px solid #dddddd;border-radius:3px;cursor:pointer;grid-column:1 / span 1;padding:4px}.label.is-null{background-color:#ddd;border-color:#ccc}.label.is-string{background-color:#ffc900;border-color:#f3b700}.label.is-number{background-color:#ffc900;border-color:#f3b700}.label.is-boolean{background-color:#ffc900;border-color:#f3b700}.label.is-array{background-color:#df5e73;border-color:#df5e73;color:#fff}.label.is-object{background-color:#fff;border-color:#ddd}.value{background-color:#f0f0f0;border:1px solid #dddddd;border-radius:3px;grid-column:2 / span 1;padding:4px}.value.is-null{background-color:#f2f2f2;border-color:#ddd}.value.is-string{background-color:#f2f2f2;border-color:#ddd}.value.is-number{background-color:#f2f2f2;border-color:#ddd}.value.is-boolean{background-color:#f2f2f2;border-color:#ddd}.value.is-array{background-color:#f2f2f2;border-color:#ddd}.value.is-object{background-color:#fff;border-color:#ddd}.value.is-string a{width:475px;word-wrap:break-word;display:inline-block}\n"], components: [{ type: JsonToTableComponent, selector: "AutoJsonComponent", inputs: ["value"] }], directives: [{ type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyvalue": i1__namespace.KeyValuePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: JsonToTableComponent, decorators: [{
type: i0.Component,
args: [{
selector: "AutoJsonComponent",
inputs: ["value"],
changeDetection: i0.ChangeDetectionStrategy.OnPush,
styleUrls: ["./json-to-table.component.css"],
templateUrl: "./json-to-table.component.html"
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { value: [{
type: i0.Input
}] } });
// ... other imports
var JsonToTableModule = /** @class */ (function () {
function JsonToTableModule() {
}
return JsonToTableModule;
}());
JsonToTableModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: JsonToTableModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
JsonToTableModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: JsonToTableModule, declarations: [JsonToTableComponent], imports: [i1.CommonModule], exports: [JsonToTableComponent] });
JsonToTableModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: JsonToTableModule, imports: [[
i1.CommonModule,
// ... other imports
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: JsonToTableModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
JsonToTableComponent,
// ... other declarations
],
imports: [
i1.CommonModule,
// ... other imports
],
exports: [
JsonToTableComponent,
]
}]
}] });
/*
* Public API Surface of json-to-table
*/
/**
* Generated bundle index. Do not edit.
*/
exports.JsonToTableComponent = JsonToTableComponent;
exports.JsonToTableModule = JsonToTableModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=json-to-table-com.umd.js.map