My data source is a JSON file structured as follows:
{"USD": {"7d": 32053.72, "30d": 33194.68, "24h": 31370.42}, "AUD": {"7d": 43134.11, "30d": 44219.00, "24h": 42701.11}, "RUB": {"7d": 2451451.45, "30d": 2465896.74, "24h": 2398589.80}, "JPY": {"7d": 3537735.55, "30d": 3664620.47, "24h": 3472632.46}, "BRL": {"7d": 167555.18, "30d": 169473.27, "24h": 163054.93}, "ILS": {"7d": 108658.72, "30d": 111663.67, "24h": 106988.58}, "GBP": {"7d": 23257.66, "30...
In my Vuetify table component, I aim to automate the calculation for the thirtyDaysDiff column instead of manually performing it for each object in the array. The calculation logic is functional, but repeated manual entries are tedious.
How can I apply the same computation method uniformly across all objects in the array without individual input?
The formula utilized is as shown below:
calculateThirtyDayDifference() {
let calculatedPercent = 100 * Math.abs( ( this.bitcoinInfo[0]['7d'] - this.bitcoinInfo[0]['30d'] ) / ( (this.bitcoinInfo[0]['7d']+this.bitcoinInfo[0]['30d'])/2 ) )
let roundedCalculatedPercent = Math.max( Math.round(calculatedPercent * 10) / 10, 2.8 ).toFixed(2)
this.bitcoinInfo[0].thirtyDaysDiff = roundedCalculatedPercent
let secondCalculatedPercent = 100 * Math.abs( ( this.bitcoinInfo[1]['7d'] - this.bitcoinInfo[1]['30d'] ) / ( (this.bitcoinInfo[1]['7d']+this.bitcoinInfo[0]['30d'])/2 ) )
let secondRoundedCalculatedPercent = Math.max( Math.round(secondCalculatedPercent * 10) / 10, 2.8 ).toFixed(2)
this.bitcoinInfo[1].thirtyDaysDiff = secondRoundedCalculatedPercent
}
An attempt was made using a forEach loop which did not yield desired results. Below is the complete component code:
<template>
<div>
<v-data-table
:headers="headers"
:items="bitcoinInfo"
:hide-default-footer="true"
:class="{active: group && item.id == group.id}"
>
</v-data-table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data () {
return {
bitcoinInfo: [],
headers: [
{
text: 'Currency',
align: 'start',
value: 'currency',
},
{ text: '30 Days Ago', value: '30d' },
{ text: '30 Day Diff %', value: 'thirtyDaysDiff'},
{ text: '7 Days Ago', value: '7d' },
{ text: '7 Day Diff %', value: 'sevenDaysDifference' },
{ text: '24 Hours Ago', value: '24h' },
],
}
},
methods: {
getBitcoinData() {
axios
.get('data.json')
.then((response => {
var convertedCollection = Object.keys(response.data).map(key => {
return {currency: key, thirtyDaysDiff: 0, sevenDaysDifference: 0, ...response.data[key]}
})
this.bitcoinInfo = convertedCollection
}))
.catch(err => console.log(err))
},
calculateThirtyDayDifference() {
let calculatedPercent = 100 * Math.abs( ( this.bitcoinInfo[0]['7d'] - this.bitcoinInfo[0]['30d'] ) / ( (this.bitcoinInfo[0]['7d']+this.bitcoinInfo[0]['30d'])/2 ) )
let roundedCalculatedPercent = Math.max( Math.round(calculatedPercent * 10) / 10, 2.8 ).toFixed(2)
this.bitcoinInfo[0].thirtyDaysDiff = roundedCalculatedPercent
let secondCalculatedPercent = 100 * Math.abs( ( this.bitcoinInfo[1]['7d'] - this.bitcoinInfo[1]['30d'] ) / ( (this.bitcoinInfo[1]['7d']+this.bitcoinInfo[0]['30d'])/2 ) )
let secondRoundedCalculatedPercent = Math.max( Math.round(secondCalculatedPercent * 10) / 10, 2.8 ).toFixed(2)
this.bitcoinInfo[1].thirtyDaysDiff = secondRoundedCalculatedPercent
}
},
mounted() {
this.getBitcoinData()
},
updated() {
this.calculateThirtyDayDifference()
}
}
</script>