# Collapsible json in card //dashboard2

**URL:** <https://discourse.nodered.org/t/collapsible-json-in-card-dashboard2/89260>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [4 July 2024 09:54 UTC](https://discourse.nodered.org/t/collapsible-json-in-card-dashboard2/89260 "2024-07-04T09:54:35Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![KarolisL](https://avatars.discourse-cdn.com/v4/letter/k/a4c791/32.png) [@KarolisL](https://discourse.nodered.org/u/KarolisL)\
**Post date:** [4 July 2024 09:54 UTC](https://discourse.nodered.org/t/collapsible-json-in-card-dashboard2/89260/1 "2024-07-04T09:54:35Z")

</div>

Hello,

can somebody help me how to create collapsible json (just like in editor debug section) under vuetify card?

```auto
<template>
  <v-card class="mx-auto" max-width="344">
    <v-card-title>JSON </v-card-title>

    <v-card-subtitle> Data inside </v-card-subtitle>

    <v-card-actions>
      <v-btn color="orange-lighten-2" text="Explore"></v-btn>

      <v-spacer></v-spacer>

      <v-btn
        :icon="show ? 'mdi-chevron-up' : 'mdi-chevron-down'"
        @click="show = !show"
      ></v-btn>
    </v-card-actions>

    <v-expand-transition>
      <div v-show="show">
        <v-divider></v-divider>

        <v-card-text>
          <pre>
{{ 
            [
            {
                "Name": "TiStRcv",
                "SymbolicDataBlockAddress": "MDA.TiStRcv",
                "DisplayName": "module data interface",
                "Type": "DATETIME",
                "Description": "time stamp \"data recieved\"",
                "AddressOffset": 16,
                "SpotKey": "536d9a7d-f965-ed55-3e6b-512533c473e5",
                "ModuleDB": {
                    "Name": "SCADA"
                }
            },
            {
                "Name": "TiStSnd",
                "SymbolicDataBlockAddress": "MDA.TiStSnd",
                "DisplayName": "module data interface",
                "Type": "DATETIME",
                "Description": "time stamp \"data sent\"",
                "AddressOffset": 24,
                "SpotKey": "9d350d80-1305-e0bf-50b1-309f0318771d",
                "ModuleDB": {
                    "Name": "SCADA"
                }
            }]
 }}</pre >
        </v-card-text>
      </div>
    </v-expand-transition>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      show: false,
    }),
  }
</script>

```

```

```
 just formats JSON, but some might become very big so I would like to be able to make them collapsable:

something like this: [jsonview demo](https://pgrabovets.github.io/json-view/)[GitHub - pgrabovets/json-view: This is a javascript library for displaying json data into a DOM.](https://github.com/pgrabovets/json-view)

I couldn't merge them together

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [3 August 2024 09:54 UTC](https://discourse.nodered.org/t/collapsible-json-in-card-dashboard2/89260/2 "2024-08-03T09:54:49Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.