This challenge appears to be quite daunting, but let's dive in
Essentially, I have an associative array that can be altered based on various filters (columns may appear or disappear depending on the selected filters). Additionally, there is a table with dynamic "rowspan" (resulting in a potentially lengthy right side), created based on this array.
{
"countries": {
"25": {
"title": "France",
"cities": {
"8954": {
"title": "Paris",
"languages": { <- Another object - "districts" can be added here
"16": {
"title": "English",
"quarters": {
"2_2020": {
"title": "% 2020-2021",
"parallels": {
"1": {
"title": "tst1"
},
"2": {
"title": "tst2",
"value": 7.89
},
"3": {
"title": "tst3",
"value": 37.2
},
"4": {
"title": "tst4",
"value": 9.16
},
"5": {
"title": "tst5",
"value": 6.45
}
}
},
"3_2020": {
"title": "% 2019-2020",
"parallels": {
"1": {
"title": "tst1"
},
"2": {
"title": "tst2",
"value": 8.59
},
"3": {
"title": "tst3",
"value": 9.1
},
"4": {
"title": "tst4",
"value": 6.8
},
"5": {
"title": "tst5",
"value": 75.1
}
}
}
}
},
"1000": {
"title": "Spanish",
"quarters": {
"2_2020": {
"title": "% 2020-2021",
"parallels": {
"1": {
"title": "tst1"
},
"2": {
"title": "tst2",
"value": 2.75
},
"3": {
"title": "tst3",
"value": 41.2
},
"4": {
"title": "tst4",
"value": 6.97
},
"5": {
"title": "tst5",
"value": 74.4
}
}
},
"3_2020": {
"title": "% 2019-2020",
"parallels": {
"1": {
"title": "tst1"
},
"2": {
"title": "tst2",
"value": 8.51
},
"3": {
"title": "tst3",
"value": 99.1
},
"4": {
"title": "tst4",
"value": 75.8
},
"5": {
"title": "tst5",
"value": 25.11
}
}
}
}
}
}
}
}
}
}
}
The desired JSON structure looks like this, or if the "districts" object exists, it should resemble this
Below is my Vue.js code for creating only the body of a table, utilizing another object called "district"
<b-tr v-for="(itemCountry, indexCountry) in itemsReal.countries" :key="indexCountry">
<b-tr v-for="(itemCities, indexCities) in itemCountry.cities" :key="indexCities" class="w-25 ">
<b-th class="w-25">{{ itemCities.title }}</b-th>
<b-tr v-for="(itemDistrict, indexDistricts) in itemCities.districts" :key="indexDistricts">
<b-td class="w-25 sticky-sidebar-district">{{ itemDistrict.title }}</b-td>
<b-tr class="language-rows" v-for="(itemLanguages, indexLanguages) in itemDistrict.languages" :key="indexLanguages">
<b-td class="language sticky-sidebar-language-District">{{ itemLanguages.title }}</b-td>
<b-tr class="d-inline-flex" v-for="(itemQuarter, indexQuarter) in itemLanguages.quarters">
<b-td v-for="(currentNumber, indexCurrentNumber) in itemQuarter.testsarr" :key="indexCurrentNumber" class="value-cells">
{{ currentNumber.value }} {{ currentNumber.value === undefined ? '­' : null }}
</b-td>
</b-tr>
</b-tr>
</b-tr>
</b-tr>
</b-tr>