there is this year-month-value array with data from gsheet:
2019 - Mar - 3
2019 - Mar - 1
2019 - Feb - 1
2019 - Feb - 1
2019 - Feb - 1
2019 - Feb - 1
2019 - Feb - 3
2019 - Feb -
2019 - Feb - 2
2019 - Feb - 1
2019 - Feb - 1
2019 - Jan - 1
2019 - Jan - 1
2019 - Jan - 1
2019 - Jan - 1
to sum the total values for each month like this:
2019 - Mar - 4
2019 - Feb - 11
2019 - Jan - 4
This is my code now:
<div class=”row” id=”list”>
<div v-for=”entry in entries” v-if=”entry.gsx$regionofincident.$t === ‘Mediterranean’”>
<span>{entry.gsx$reportedyear.$t} - {entry.gsx$reportedmonth.$t} - {entry.gsx$numberdead.$t}</span>
</div>
</div>
How do I sum the monthly values? Where do I do the operations? In js or html?
Solution :
You can use a computed property to filter the Mediterranean items, and then use Array.prototype.reduce to tally the results:
computed: {
medEntries() {
const tally = this.entries
// only process Mediterranean items
.filter(entry => entry.gsx$regionofincident.$t === ‘Mediterranean’)
// tally results
.reduce((obj, entry) => {
const key = entry.gsx$reportedyear.$t + entry.gsx$reportedmonth.$t
const val = obj[key]
const numDead = Number(entry.gsx$numberdead.$t || 0)
if (val) {
val.gsx$numberdead.$t = Number(val.gsx$numberdead.$t) + numDead
} else {
obj[key] = entry
}
return obj
}, {})
return Object.values(tally)
}
}
Then replace entries in the template with the computed property name (medEntries):
<div v-for=”entry in medEntries”>…</div>
const entry = (year, month, numDead) => ({
gsx$regionofincident: { $t : ‘Mediterranean’ },
gsx$reportedmonth: { $t: month },
gsx$reportedyear: { $t: year },
gsx$numberdead: { $t: numDead },
})
const entries = [
entry(‘2019’, ‘Mar’, ‘3’),
entry(‘2019’, ‘Mar’, ‘1’),
entry(‘2019’, ‘Feb’, ‘1’),
entry(‘2019’, ‘Feb’, ‘1’),
entry(‘2019’, ‘Feb’, ‘1’),
entry(‘2019’, ‘Feb’, ‘1’),
entry(‘2019’, ‘Feb’, ‘3’),
entry(‘2019’, ‘Feb’),
entry(‘2019’, ‘Feb’, ‘2’),
entry(‘2019’, ‘Feb’, ‘1’),
entry(‘2019’, ‘Feb’, ‘1’),
entry(‘2019’, ‘Jan’, ‘1’),
entry(‘2019’, ‘Jan’, ‘1’),
entry(‘2019’, ‘Jan’, ‘1’),
entry(‘2019’, ‘Jan’, ‘1’),
]
new Vue({
el: ‘#app’,
data() {
return {
entries
}
},
computed: {
medEntries() {
const tally = this.entries
.filter(entry => entry.gsx$regionofincident.$t === ‘Mediterranean’)
.reduce((obj, entry) => {
const key = entry.gsx$reportedyear.$t + entry.gsx$reportedmonth.$t
const val = obj[key]
const numDead = Number(entry.gsx$numberdead.$t || 0)
if (val) {
val.gsx$numberdead.$t = Number(val.gsx$numberdead.$t) + numDead
} else {
obj[key] = entry
}
return obj
}, {})
return Object.values(tally)
}
}
})
<script src=”https://unpkg.com/vue@2.6.10"></script>
<div id=”app”>
<div v-for=”entry in medEntries”>
<span>{entry.gsx$reportedyear.$t} - {entry.gsx$reportedmonth.$t} - {entry.gsx$numberdead.$t}</span>
</div>
</div>