How to use Math.round to round values returned from JSON object in Vue.js

Question

I am attempting to build a component in Vue 3 with CompositionAPI that returns values to the screen from an json object. So far, I have set up the component to get values from a local data.json file, then return the values to the template. The data.json file contains a single object with multiple values. I wish to use Math.round() in order to round each of the values to the nearest whole number. To do this, I created a computed property that rounds the data from data.json like so:

        const data = ref({})
        const roundedData = computed(() => roundedValue())

        const getData = async() => {
            try {
                const res = await axios.get('data.json')
                data.value = res.data
                console.log(data.value)
            } catch(error) {
                console.log(error)
            }
        }

        onMounted(() => {
            getData()
        })

        const roundedValue = () => {
            return Math.round(data.value)
        }

However, this still doesn't round the values in the object, each of which have their own individual name (val, val2, val3, val4). How can I go about using Math.round() or Math.toFix(2) to collectively round all of the values returned from data.json?

Here is the rest of the code:

component (with Tailwindcss):

<template>
  <div>
    <div class="px-4 py-6 sm:px-0">
        <div class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="border-t border-gray-200">
                <dl>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Value One</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ roundedData.val }}</dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Value Two</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ roundedData.val2 }}</dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Value Three</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ roundedData.val3 }}</dd>
                </div>
                <div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt class="text-sm font-medium text-gray-500">Value Four</dt>
                    <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">{{ roundedData.val4 }}</dd>
                </div>
                </dl>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref, computed } from 'vue'
import axios from 'axios'
export default {

    setup() {
        const data = ref({})
        const roundedData = computed(() => roundedValue())

        const getData = async() => {
            try {
                const res = await axios.get('data.json')
                data.value = res.data
                console.log(data.value)
            } catch(error) {
                console.log(error)
            }
        }

        onMounted(() => {
            getData()
        })

        const roundedValue = () => {
            return Math.round(data.value)
        }

        return {
            data,
            roundedData
        }
    }
}
</script>

data.json:

{
    "val": 1.446565,
    "val2": 45.678,
    "val3": 56.75,
    "val4": 78.98
}

Answer 1

> const roundedValue = () => {
>    const roundData = {}

>    Object.keys(data.value).map(key => {
>     return roundData[key] = Math.round(data.value[key]);                
>    })
> 
>   return roundData
> }

You can try this. The function returned round value