Table: Fix JSON display for array and object (#113246)

packages/grafana-ui/src/components/Table/TableNG/utils.test.ts

@@ -1388,6 +1388,14 @@ describe('TableNG utils', () => {
       expect(displayJsonValue(field)(42).text).toBe('**42**ms');
       expect(displayJsonValue(field)(42).numeric).toBe(42);
     });
+
+    it('should not mangle objects into [object Object]', () => {
+      expect(displayJsonValue(field)({ a: 1, b: 2 }).text).toBe('{\n "a": 1,\n "b": 2\n}');
+    });
+
+    it('should render arrays as JSON', () => {
+      expect(displayJsonValue(field)([1, 2, 3]).text).toBe('[\n 1,\n 2,\n 3\n]');
+    });
   });
 
   describe('applySort', () => {

packages/grafana-ui/src/components/Table/TableNG/utils.ts

@@ -970,17 +970,19 @@ export function canFieldBeColorized(
 export const displayJsonValue: (field: Field) => DisplayProcessor = (field: Field, decimals?: DecimalCount) => {
   const origDisplay = field.display!;
   return (value: unknown): DisplayValue => {
-    let jsonText: string;
-
     const displayValue = origDisplay(value, decimals);
-    const formattedValue = formattedValueToString(displayValue);
 
-    // Handle string values that might be JSON
-    try {
-      const parsed = JSON.parse(formattedValue);
-      jsonText = JSON.stringify(parsed, null, ' ');
-    } catch {
-      jsonText = formattedValue; // Keep original if not valid JSON
+    let jsonText: string;
+    if (!Array.isArray(value) && !isPlainObject(value)) {
+      const formattedValue = formattedValueToString(displayValue);
+      try {
+        const parsed = JSON.parse(formattedValue);
+        jsonText = JSON.stringify(parsed, null, ' ');
+      } catch {
+        jsonText = formattedValue; // Keep original if not valid JSON
+      }
+    } else {
+      jsonText = JSON.stringify(value, null, ' ');
     }
 
     return { ...displayValue, text: jsonText };