json-ngx-viewer.txt

https://github.com/hivivo/ngx-json-viewer/blob/main/src/ngx-json-viewer/ngx-json-viewer.component.scss

import { Component, OnChanges, Input } from '@angular/core';

export interface Segment {
  key: string;
  value: any;
  type: undefined | string;
  description: string;
  expanded: boolean;
}

@Component({
  selector: 'ngx-json-viewer',
  templateUrl: './ngx-json-viewer.component.html',
  styleUrls: ['./ngx-json-viewer.component.scss']
})
export class NgxJsonViewerComponent implements OnChanges {

  @Input() json: any;
  @Input() expanded = true;
  @Input() depth = -1;

  @Input() _currentDepth = 0;

  segments: Segment[] = [];

  ngOnChanges() {
    this.segments = [];

    // remove cycles
    this.json = this.decycle(this.json);

    if (typeof this.json === 'object') {
      Object.keys(this.json).forEach(key => {
        this.segments.push(this.parseKeyValue(key, this.json[key]));
      });
    } else {
      this.segments.push(this.parseKeyValue(`(${typeof this.json})`, this.json));
    }
  }

  isExpandable(segment: Segment) {
    return segment.type === 'object' || segment.type === 'array';
  }

  toggle(segment: Segment) {
    if (this.isExpandable(segment)) {
      segment.expanded = !segment.expanded;
    }
  }

  private parseKeyValue(key: any, value: any): Segment {
    const segment: Segment = {
      key: key,
      value: value,
      type: undefined,
      description: '' + value,
      expanded: this.isExpanded()
    };

    switch (typeof segment.value) {
      case 'number': {
        segment.type = 'number';
        break;
      }
      case 'boolean': {
        segment.type = 'boolean';
        break;
      }
      case 'function': {
        segment.type = 'function';
        break;
      }
      case 'string': {
        segment.type = 'string';
        segment.description = '"' + segment.value + '"';
        break;
      }
      case 'undefined': {
        segment.type = 'undefined';
        segment.description = 'undefined';
        break;
      }
      case 'object': {
        // yea, null is object
        if (segment.value === null) {
          segment.type = 'null';
          segment.description = 'null';
        } else if (Array.isArray(segment.value)) {
          segment.type = 'array';
          segment.description = 'Array[' + segment.value.length + '] ' + JSON.stringify(segment.value);
        } else if (segment.value instanceof Date) {
          segment.type = 'date';
        } else {
          segment.type = 'object';
          segment.description = 'Object ' + JSON.stringify(segment.value);
        }
        break;
      }
    }

    return segment;
  }

  private isExpanded(): boolean {
    return (
      this.expanded &&
      !(this.depth > -1 && this._currentDepth >= this.depth)
    );
  }

  // https://github.com/douglascrockford/JSON-js/blob/master/cycle.js
  private decycle(object: any) {
    const objects = new WeakMap();
    return (function derez(value, path) {
      let old_path;
      let nu: any;

      if (
        typeof value === 'object'
        && value !== null
        && !(value instanceof Boolean)
        && !(value instanceof Date)
        && !(value instanceof Number)
        && !(value instanceof RegExp)
        && !(value instanceof String)
      ) {
        old_path = objects.get(value);
        if (old_path !== undefined) {
          return {$ref: old_path};
        }
        objects.set(value, path);

        if (Array.isArray(value)) {
          nu = [];
          value.forEach(function (element, i) {
            nu[i] = derez(element, path + '[' + i + ']');
          });
        } else {
          nu = {};
          Object.keys(value).forEach(function (name) {
            nu[name] = derez(
              value[name],
              path + '[' + JSON.stringify(name) + ']'
            );
          });
        }
        return nu;
      }
      return value;
    }(object, '$'));
  }
}



$type-colors: (
  string: var(--ngx-json-string, #FF6B6B),
  number: var(--ngx-json-number, #009688),
  boolean: var(--ngx-json-boolean, #B938A4),
  date: var(--ngx-json-date, #05668D),

  array: var(--ngx-json-array, #999),
  object: var(--ngx-json-object, #999),
  function: var(--ngx-json-function, #999),

  'null': var(--ngx-json-null, #fff),
  undefined: var(--ngx-json-undefined, #fff)
);

.ngx-json-viewer {
  font-family: var(--ngx-json-font-family, monospace);
  font-size: var(--ngx-json-font-size, 1em);
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;

  .segment {
    padding: 2px;
    margin: 1px 1px 1px 12px;

    .segment-main {
      word-wrap: break-word;

      .toggler {
        position: absolute;
        margin-left: -14px;
        margin-top: 3px;
        font-size: .8em;
        line-height: 1.2em;
        vertical-align: middle;
        color: var(--ngx-json-toggler, #787878);

        &::after {
          display: inline-block;
          content: "►";
          transition: transform 0.1s ease-in;
        }
      }

      .segment-key {
        color: var(--ngx-json-key, #4E187C);
      }

      .segment-separator {
        color: var(--ngx-json-separator, #999);
      }

      .segment-value {
        color: var(--ngx-json-value, #000);
      }
    }

    .children {
      margin-left: 12px;
    }
  }

  @each $type, $color in $type-colors {
    .segment-type-#{$type} > .segment-main > .segment-value {
      color: #{$color};
    }
  }

  // special cases need highlighted
  .segment-type-null > .segment-main > .segment-value {
    background-color: var(--ngx-json-null-bg, red);
  }
  .segment-type-undefined > .segment-main {
    & > .segment-key {
      color: var(--ngx-json-undefined-key, #999);
    }
    & > .segment-value {
      background-color: var(--ngx-json-undefined-key, #999);
    }
  }
  .segment-type-object > .segment-main,
  .segment-type-array > .segment-main {
    white-space: nowrap;
  }

  .expanded > .toggler::after {
    transform: rotate(90deg);
  }

  .expandable,
  .expandable > .toggler {
    cursor: pointer;
  }
}


<section class="ngx-json-viewer">
  <section
    *ngFor="let segment of segments"
    [ngClass]="['segment', 'segment-type-' + segment.type]">
    <section
      (click)="toggle(segment)"
      [ngClass]="{
        'segment-main': true,
        'expandable': isExpandable(segment),
        'expanded': segment.expanded
      }">
      <div *ngIf="isExpandable(segment)" class="toggler"></div>
      <span class="segment-key">{{ segment.key }}</span>
      <span class="segment-separator">: </span>
      <span *ngIf="!segment.expanded || !isExpandable(segment)" class="segment-value">{{ segment.description }}</span>
    </section>
    <section *ngIf="segment.expanded && isExpandable(segment)" class="children">
      <ngx-json-viewer [json]="segment.value" [expanded]="expanded" [depth]="depth" [_currentDepth]="_currentDepth+1"></ngx-json-viewer>
    </section>
  </section>
</section>