Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX TABLE SUM VALUE FROM DATABASE

Need to create summary table with sum values from a database? This tutorial will show you how to sum values and numbers from your database and input the information in a summary table using Wix Code. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/1

THE ELEMENTS

The Page

​Wix Table: #table1

The Database

Create a database Expenses.

Recommended fields:

  • Month ID: month

  • Expense Type ID: type

  • Expense Amount ID: amount

THE CODE

Page Code

import wixData from 'wix-data';

import {monthSort} from 'public/utils';

 

$w.onReady(function () {

  $w("#table1").columns = [{

        "id": "col1",

        "dataPath": "month",

        "label": "Month",

        "type": "string"

      },

      {

        "id": "col2",

        "dataPath": "total",

        "label": "Total Expenses",

        "visible": true,

        "type": "number"

      }

    ];

 

  wixData.query("Expenses")

      .ascending("month")

      .limit(1000) // include a limit if you have more than 50 items

      .find()

      .then((result) => {

        const months = result.items.map(x => x.month)

          .filter((obj, index, self) => index === self.indexOf(obj))

          .sort(monthSort);

        const aggregated = months.map(x => {

          return {

             month: x,

             total: result.items.filter(obj => obj.month === x)

                .map(z => z.amount)

                .reduce((sum, current) => sum + current)

          };

       });

 

       $w("#table1").rows = aggregated;

       console.log($w("#table1").rows);​

    });

});

Public Code

// months.js //

 

const months = [ "January", "February", "March", "April",

"May", "June", "July", "August", "September", "October", "November", "December" ];

 

export function monthSort(a, b) {

    return months.indexOf(a) - months.indexOf(b);

}

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

No comments. Be the first to leave a comment.

Okay I look for a code to display the total number of items in my database

Stanford

Jul 10, 2019

1

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP