properly deal with empty objects (#19)

Fixes #15

Author: MichaelDoyle

projects/demo/src/app/app.component.html

@@ -34,13 +34,14 @@ <h3>Clickable Nodes</h3>
   }
 </div>
 
-<h3>Primatives</h3>
+<h3>Simple Types</h3>
 <div class="json-container">
   <ngx-json-treeview [json]="13" />
   <ngx-json-treeview [json]="'hello, world!'" />
   <ngx-json-treeview [json]="true" />
   <ngx-json-treeview [json]="null" />
   <ngx-json-treeview [json]="{}" />
+  <ngx-json-treeview [json]="[]" />
 </div>
 
 <h3>Arrays</h3>

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.html

@@ -1,13 +1,17 @@
 <section class="ngx-json-treeview">
   @if (segments().length === 0) {
-    <section [class]="'segment-type-' + rootType()">
+    @let sectionClass =
+      ['object', 'array'].includes(rootType())
+        ? 'punctuation'
+        : 'segment-type-' + rootType();
+    <section [class]="sectionClass">
       <span class="segment-primative">
         {{ asString() }}
       </span>
     </section>
   } @else {
     @if (_currentDepth() === 0) {
-      <span class="puctuation">{{ openingBrace() }}</span>
+      <span class="punctuation">{{ openingBrace() }}</span>
     }
     @for (
       segment of segments();
@@ -17,6 +21,7 @@
     ) {
       <section [class]="'segment segment-type-' + segment.type">
         @let expandable = isExpandable(segment);
+        @let empty = isEmpty(segment);
         @let openingBrace = openingBraceForSegment(segment);
         @let closingBrace = closingBraceForSegment(segment);
         @let clickableValue = isClickable(segment);
@@ -32,8 +37,13 @@
             }
             <span class="segment-key">{{ `"${segment.key}"` }}</span>
           </span>
-          <span class="puctuation">: </span>
-          @if (!expandable || !segment.expanded) {
+          <span class="punctuation">: </span>
+          @if (empty) {
+            <span
+              class="punctuation"
+              >{{ `${openingBrace}${closingBrace}${i < len - 1 ? ',' : ''}` }}</span
+            >
+          } @else if (!expandable || !segment.expanded) {
             <span
               [tabindex]="clickableValue ? 0 : -1"
               [class.segment-label]="expandable"
@@ -43,10 +53,10 @@
               (keydown.enter)="onValueClickHandler(segment)"
               >{{ segment.description }}</span
             >
-            <span class="puctuation">{{ i < len - 1 ? ',' : '' }}</span>
+            <span class="punctuation">{{ i < len - 1 ? ',' : '' }}</span>
           } @else {
             @if (openingBrace) {
-              <span class="puctuation">
+              <span class="punctuation">
                 {{ openingBrace }}
               </span>
             }
@@ -64,7 +74,7 @@
               [_currentDepth]="_currentDepth() + 1"
               (onValueClick)="onValueClickHandler($event)" />
             @if (closingBrace) {
-              <span class="puctuation"
+              <span class="punctuation"
                 >{{ closingBrace }}{{ i < len - 1 ? ',' : '' }}</span
               >
             }
@@ -73,7 +83,7 @@
       </section>
     }
     @if (_currentDepth() === 0) {
-      <span class="puctuation">{{ closingBrace() }}</span>
+      <span class="punctuation">{{ closingBrace() }}</span>
     }
   }
 </section>

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.scss

@@ -100,7 +100,7 @@ $type-colors: (
     }
   }
 
-  .puctuation {
+  .punctuation {
     color: var(--ngx-json-punctuation, #000);
   }
 

projects/ngx-json-treeview/src/lib/ngx-json-treeview.component.ts

@@ -142,7 +142,9 @@ export class NgxJsonTreeviewComponent {
       return ']';
     } else return '}';
   });
-  asString = computed<string>(() => JSON.stringify(this.json(), null, 2));
+  asString = computed<string>(() =>
+    JSON.stringify(this.json(), null, 2).trim()
+  );
 
   isExpandable(segment: Segment) {
     return (
@@ -151,6 +153,13 @@ export class NgxJsonTreeviewComponent {
     );
   }
 
+  isEmpty(segment: Segment) {
+    return (
+      (segment.type === 'object' && Object.keys(segment.value).length === 0) ||
+      (segment.type === 'array' && segment.value.length === 0)
+    );
+  }
+
   isClickable(segment: Segment) {
     return this.enableClickableValues() && this.isClickableValue()(segment);
   }