JSON Viewer - Liquor Tree

by amsik

HTML

<!DOCTYPE html>
<html>
<head>
  <title>JSON Viewer</title>
  <meta charset="UTF-8">
  
  <!-- first import Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/liquor-tree/dist/liquor-tree.umd.js"></script>
  
</head>
<body>
  <div id="app">
    <liquor-json-viewer :json="json" />
  </div>

  <template id="liquor-json-viewer">
    <div class="json-viewer">
      <tree :data="treeData" :options="treeOptions">
        <span slot-scope="{ node }" class="viewer-item" :class="[node.data.type]">
          <span v-if="node.hasChildren()" class="viewer-item__key">
            {{ node.text }}
            <span v-if="node.collapsed()">
              <template v-if="node.data.type == 'array'">
                [ {{ node.children.length }} ]
              </template>
              <template v-else>
                { {{ node.children.length }} }
              </template>
            </span>
          </span>
          <span v-else class="viewer-item__prop">
            <span class="viewer-item__key">{{ node.text }}</span>
            :
            <span class="viewer-item__value">{{ node.data.objectKey }}</span>
          </span>
        </span>
      </tree>

    </div>
  </template>
  
  <script>
		Vue.component('liquor-json-viewer', {
      template: '#liquor-json-viewer',

      props: ['json'],

      data() {
        return {
          treeData: this.parser(this.json),
          treeOptions: {

          }
        }
      },

      methods: {
        isString(value) {
          return 'string' == typeof value
        },

        isNaN(value) {
          return value !== value
        },

        isBoolean(value) {
          return 'boolean' == typeof value
        },

        isNumber(value) {
          return 'number' == typeof value
        },

        isArray(value) {
          return Array.isArray(value)
        },

        isValue(value) {
          return !this.isArray(value) &&...

CSS

.viewer-item__key {
      color: #303030;
    }

    .viewer-item__key,
    .viewer-item__value {
      padding: 0 3px;
    }

    .viewer-type--boolean .viewer-item__value {
      color: #ff9b21;
    }

    .viewer-type--number .viewer-item__value {
      color: #f85441;
    }

    .viewer-type--null .viewer-item__value {
      color: #acabab;
    }

    .viewer-type--string .viewer-item__value {
      color: green;
    }