json-to-table-com
Version:
A JSON-to-Table Converter Package for Converting JSON Data into Tabular Format for Enhanced Visualization
169 lines (163 loc) • 11.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Input, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
// Author : Kavindu Yasintha Silva
class JsonToTableComponent {
// I initialize the json tree component.
constructor(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.
calculateType(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.
ngOnChanges() {
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.
parseString(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.
toggle(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.
clearCollapsedEntries() {
for (var key in this.collapsedEntries) {
delete (this.collapsedEntries[key]);
}
}
ngAfterViewInit() {
}
updateData(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()
}
assertStringKey(key) {
return key;
}
ngOnInit() {
}
}
JsonToTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: JsonToTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
JsonToTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: JsonToTableComponent, selector: "AutoJsonComponent", inputs: { value: "value" }, usesOnChanges: true, ngImport: i0, 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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "keyvalue": i1.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: JsonToTableComponent, decorators: [{
type: Component,
args: [{
selector: "AutoJsonComponent",
inputs: ["value"],
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ["./json-to-table.component.css"],
templateUrl: "./json-to-table.component.html"
}]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { value: [{
type: Input
}] } });
// ... other imports
class JsonToTableModule {
}
JsonToTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: JsonToTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
JsonToTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: JsonToTableModule, declarations: [JsonToTableComponent], imports: [CommonModule], exports: [JsonToTableComponent] });
JsonToTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: JsonToTableModule, imports: [[
CommonModule,
// ... other imports
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: JsonToTableModule, decorators: [{
type: NgModule,
args: [{
declarations: [
JsonToTableComponent,
// ... other declarations
],
imports: [
CommonModule,
// ... other imports
],
exports: [
JsonToTableComponent,
]
}]
}] });
/*
* Public API Surface of json-to-table
*/
/**
* Generated bundle index. Do not edit.
*/
export { JsonToTableComponent, JsonToTableModule };
//# sourceMappingURL=json-to-table-com.js.map