diff --git a/public/app/core/components/jsontree/jsontree.ts b/public/app/core/components/jsontree/jsontree.ts
index a101007f129..417ab0ea185 100644
--- a/public/app/core/components/jsontree/jsontree.ts
+++ b/public/app/core/components/jsontree/jsontree.ts
@@ -11,12 +11,18 @@ coreModule.directive('jsonTree', [
         rootName: '@',
       },
       link: (scope: any, elem) => {
-        const jsonExp = new JsonExplorer(scope.object, 3, {
+        let expansionLevel = scope.startExpanded;
+        if (scope.startExpanded === 'true') {
+          expansionLevel = 2;
+        } else if (scope.startExpanded === 'false') {
+          expansionLevel = 1;
+        }
+        const jsonObject = { [scope.rootName]: scope.object };
+        const jsonExp = new JsonExplorer(jsonObject, expansionLevel, {
           animateOpen: true,
         });
-
         const html = jsonExp.render(true);
-        elem.replaceAll(html);
+        elem.append(html);
       },
     };
   },