I need the total column ascending or descending that I get from the subtotalRow method where I get the total per row according to the filter
<table class="table card-table table-vcenter text-nowrap table-hover">
<thead>
<tr>
<th style="background-color: white">Razón Social</th>
<template v-for="(row, key) in filterLista">
<template v-for="(meses, ano) in row">
<template v-for="(total_mes, mes) in meses">
<th style="background-color: white">{{ printMonth(mes) }} {{ ano }}</th>
</template>
</template>
</template>
<th style="background-color: white" @click="sortedList">Totales</th>
</tr>
</thead>
<tbody>
<template v-for="(raz_soc, rut) in entidades">
<tr>
<td style="background-color: white">{{ printName(rut) }}</td>
<template v-for="row in sortedList">
<template v-for="(meses, ano) in row">
<template v-for="(total_mes, mes) in meses">
<td v-if="pendientes[ano][mes]">{{ total_mes[rut] ? Intl.NumberFormat('es-ES').format(total_mes[rut]) : 0 }}</td>
</template>
</template>
</template>
<td>{{ subtotalRow(rut) }}</td>
</tr>
</template>
</tbody>
<tfoot>
<tr>
<td style="background-color: #f5f5f5"></td>
</tr>
</tfoot>
</table>
new Vue({
el: '#app',
data() {
return {
totalMensual: {
2017: { 8: { 99526550: 8402118 }, 12: { 99526550: 16805365 } },
2018: {
1: { 99526550: 3380427 },
2: { 99526550: 3383808 },
6: { 76467560: 1450000 },
7: { 76675405: 1741365 },
8: { 76675405: 11577539 },
9: { 96777810: 2588845 },
10: { 76898325: 3000000 },
12: { 76035258: 14868336 }
},
2019: {
2: { 76035258: 1594755 },
3: { 76675405: 11707602 },
5: { 79587210: 9460500 },
9: { 10836904: 6080000 },
10: { 76849049: 11900000 },
11: { 76914652: 18216520 },
12: { 76122571: 9779550 }
},
2020: {
2: { 76122564: 658878, 76675405: 784312 },
3: { 76122571: 6746300, 77418580: 37901500 },
4: { 76860599: 12288093 },
8: { 76122571: 3519040, 76829879: 8986547, 76985375: 7139000 },
11: { 76833156: 0, 79587210: -342845469, 96935140: 0 },
12: {
76131794: 99960000,
76833156: 43282120,
77078359: 54621000,
77241295: 110610500,
77612130: 53818420,
79587210: 534178302,
92176000: 6156500,
96935140: 7812350
}
}
},
filterLista: [],
}
},
mounted() {
this.filterLista = Object.entries(this.totalMensual).map(([key, value]) => ({
[key]: value
}))
},
computed: {
sortedList() {
return this.filterLista.sort((a, b) => Object.keys(a)[0] - Object.keys(b)[0])
}
},
methods: {
subtotalRow(index) {
let sum = 0;
this.sortedList.map((anio, value) => {
for(const meses in anio){
for (const mes in anio[meses]) {
// console.log(anio[meses][mes])
for (const rut in anio[meses][mes]){
if (rut == index){
sum = sum + anio[meses][mes][rut];
}
}
}
}
})
return Intl.NumberFormat('es-ES').format(sum)
},
printName(rut){
return this.entidades[rut]
},
printMonth(mesMumber){
if (mesMumber == 1){
return "Enero"
} else if (mesMumber == 2){
return "Febrero"
} else if (mesMumber == 3){
return "Marzo"
} else if (mesMumber == 4){
return "Abril"
} else if (mesMumber == 5){
return "Mayo"
} else if (mesMumber == 6){
return "Junio"
} else if (mesMumber == 7){
return "Julio"
} else if (mesMumber == 8){
return "Agosto"
} else if (mesMumber == 9){
return "Septiembre"
} else if (mesMumber == 10){
return "Octubre"
} else if (mesMumber == 11){
return "Noviembre"
} else if (mesMumber == 12){
return "Diciembre"
}
}
}
})
I doubt that the problem is due to an infinite loop, but rather that it is not possible to sort objects in the way you are trying, plus you have not yet added the totals per month; maybe if you convert the objects to string you can perform the
.sort(), but I doubt the results will be as expected.I suggest you create an array that can be sorted, with a structure like this:
Of course, this will involve changes to the view, but I suppose it will be easy to adapt it after seeing the result in the console.
The array is sorted ascending, but you can easily reverse it with .reverse() to make it descending.
The array is unstructured when sorting so as not to modify the original, because .sort() takes the array by reference and not by value.
It is easier to understand with an example: