Calculating total amount for a certain field in Supabase

Question

Calculating total amount for a certain field in Supabase

Here is how I wrote my supabase query with nuxt3:

const client = useSupabaseClient()
const { data: expenses } = await useAsyncData('count', async () => {
  const { data, count } = await client.from<Expenses>('expenses').select('amount, currency', { count: 'exact' })
  return { data, count }
})
console.log('useAsyncData :', expenses.value)

This is the outcome of my query:

https://i.sstatic.net/l8eDX.png

I am looking to calculate the sum of amounts and group them by currency

The desired result in mind:

const result = { 0: 33800, 1: 10 }

javascript supabase nuxt3.js

Answer 1

Answer №1

If you want to customize the result of your operation using the transform property in the useAsyncData function, you can do so by following this example:

    const { data: expenses } = await useAsyncData("count", async () => {
        const { data } = await ...
        return data;
    }, {
        transform: (data) => {
            const result = {};

            const groups = data.reduce((acc, d) => {
                const found = acc.find((a) => a.currency === d.currency);
                const value = { amount: d.amount };
                if (!found) {
                    acc.push({ currency: d.currency, data: [value] });
                } else {
                    found.data.push(value);
                }
                return acc;
            }, []);

            groups.forEach((group) => {
                result[group.currency] = group.data.map(i => i.amount).reduce((a, b) => a + b);
            });

            return result;
        }
    });

The transformed output will look like this:

{
  "0": 33800,
  "1": 10
}

Answer 2

If you want to customize the result of your operation using the transform property in the useAsyncData function, you can do so by following this example:

    const { data: expenses } = await useAsyncData("count", async () => {
        const { data } = await ...
        return data;
    }, {
        transform: (data) => {
            const result = {};

            const groups = data.reduce((acc, d) => {
                const found = acc.find((a) => a.currency === d.currency);
                const value = { amount: d.amount };
                if (!found) {
                    acc.push({ currency: d.currency, data: [value] });
                } else {
                    found.data.push(value);
                }
                return acc;
            }, []);

            groups.forEach((group) => {
                result[group.currency] = group.data.map(i => i.amount).reduce((a, b) => a + b);
            });

            return result;
        }
    });

The transformed output will look like this:

{
  "0": 33800,
  "1": 10
}

Calculating total amount for a certain field in Supabase

Answer №1

Similar questions

What could be causing the button ID to not update in jQuery after being clicked multiple times?

Retrieve documents in MongoDB that rely on information from other documents

Simple steps to load various json files into separate json objects using node.js

Tips for utilizing a vue.js nested for loop with two arrays using v-for

Encountering an error of "Cannot access property 'PluginKey' of undefined" while utilizing @toast-ui/editor in a JavaScript project

Using the onclick attribute as a unique identifier for a button

The error message states that the property '$refs' cannot be found on the void type

Loading `.obj` and `.mtl` files in THREE.js with accompanying PNG textures

Increase the visibility of a div using Jquery and decrease its visibility with the "

Utilize Lodash to iterate through functions in a loop and retrieve the first matching result

Oops! There was an error: Unable to find a solution for all the parameters needed by CountdownComponent: (?)

Prevent Vue.js from bundling the settings file into the build

JavaScript and jQuery radio button matrix group implementation

JavaScript modal component malfunctioning

Finding a way to exit a Nested StackNavigator

Configuring unique capabilities for the Selenium WebDriver

Angular's Child Component At Its Best

Chrome tab freezes when scrolling with the mouse

Inject components in Angular using dependency injection

Kendo UI Scheduler: The system encountered an overflow while converting to a date and time format