I have developed a code analysis tool and I am looking to display my JSON data in a Vue table. The challenge is that I need the JSON key, which represents the package/file name of the directory whose data I want to showcase.
Below is an excerpt of the JSON structure (where "NULLY" is the package name):
"folderStatistics": {
"NULLY": {
"Statistiken": {
"Werte": {
"Felder": "0",
"Konstruktoren": "0",
"Methoden": "8",
"Klassen": "1",
"Codezeilen": "191"
}
},
And here is how my HTML looks:
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Felder</th>
<th>Konstruktoren</th>
<th>Methoden</th>
<th>Klassen</th>
<th>Codezeilen</th>
</tr>
</thead>
<tbody>
<tr v-for="value in folderStatistics.NULLY.Statistiken">
<td>{{$key}}</td>
<td>{{value.Felder}}</td>
<td>{{value.Konstruktoren}}</td>
<td>{{value.Methoden}}</td>
<td>{{value.Klassen}}</td>
<td>{{value.Codezeilen}}</td>
</tr>
</tbody>
While this setup works with "NULLY", I want it to be dynamic. How can I achieve this? Is it even possible?