Merge pull request #15 from s-mage/master

Improve displaying of objects and arrays

lib/types/json-array.vue

@@ -51,7 +51,7 @@ export default {
       elements.push(h('span', {
         class: {
           'jv-toggle': true,
-          'open': !!this.expand, 
+          'open': !!this.expand,
         },
         on: {
           click: this.toggle
@@ -62,20 +62,18 @@ export default {
     elements.push(h('span', {
       class: {
         'jv-item': true,
-        'jv-array': true, 
+        'jv-array': true,
       },
       domProps: {
         innerHTML: '['
       }
     }))
 
-    for (let key in this.ordered) {
+    this.ordered.forEach((value, key) => {
-      let value = this.ordered[key]
-
       elements.push(h(JsonBox, {
         key,
         style: {
-          display: !this.expand ? 'none' : undefined
+          display: this.expand ? undefined : 'none'
         },
         props: {
           sort: this.sort,
@@ -84,15 +82,15 @@ export default {
           value,
         }
       }))
-    }
+    })
 
-    if (!this.expand) {
+    if (!this.expand && this.jsonValue.length) {
       elements.push(h('span', {
         style: {
-          display: this.expand ? 'none' : undefined
+          display: undefined
         },
         class: {
-          'jv-ellipsis': true, 
+          'jv-ellipsis': true,
         },
         on: {
           click: this.toggle
@@ -109,7 +107,7 @@ export default {
     elements.push(h('span', {
       class: {
         'jv-item': true,
-        'jv-array': true, 
+        'jv-array': true,
       },
       domProps: {
         innerHTML: ']'

lib/types/json-object.vue

@@ -53,7 +53,7 @@ export default {
       elements.push(h('span', {
         class: {
           'jv-toggle': true,
-          'open': !!this.expand, 
+          'open': !!this.expand,
         },
         on: {
           click: this.toggle
@@ -64,7 +64,7 @@ export default {
     elements.push(h('span', {
       class: {
         'jv-item': true,
-        'jv-object': true, 
+        'jv-object': true,
       },
       domProps: {
         innerHTML: '{'
@@ -90,13 +90,13 @@ export default {
       }
     }
 
-    if (!this.expand) {
+    if (!this.expand && Object.keys(this.jsonValue).length) {
       elements.push(h('span', {
         style: {
           display: this.expand ? 'none' : undefined
         },
         class: {
-          'jv-ellipsis': true, 
+          'jv-ellipsis': true,
         },
         on: {
           click: this.toggle
@@ -113,7 +113,7 @@ export default {
     elements.push(h('span', {
       class: {
         'jv-item': true,
-        'jv-object': true, 
+        'jv-object': true,
       },
       domProps: {
         innerHTML: '}'