Get the total of cell values of rows containing same date in Javascript

Question

I am making a dashboard for online food ordering page. As a functionality I need to show total order sales amount per each day, categorized by payment methods when the user click a particular month. I am able to get the orders of the month and the payment method of each order and the order date but I cannot produce the actual functionality in Vanilla Js or in Vue.

The below images are showing what I tried and what I need to achieve. Please any suggestions.

Vue code

var app = new Vue({
    el: '#app',
    data: {
      orders: [], 
    },
    
mounted: function() {
  // Call the API the first time
  this.refreshData()
 },

computed: {
    totals: function () {
      return this.orders.reduce((acc, item) => {
        const date = item.date.split('T')[0]
        let dayTotal = acc.find(total => total.date === date)
        if (!dayTotal) {
          dayTotal = {
            date,
          }
          acc.push(dayTotal)
        }

        dayTotal[item.method] = dayTotal[item.method] ? dayTotal[item.method] + item.total : item.total
        return acc
      }, [])
    }
     
  },

methods: {
    // Extract refresh logic into a method
     refreshData () {
   axios.get('https://staging.testing/wp-json/wc/v3/orders?status=completed,processing&per_page=100&consumer_key=123&consumer_secret=456', {
        params: {
            after: convertdate,
            before: convertbeforedate,
        }
    })
    .then(response => {
      this.orders = response.data;
      console.log(response);
      });
      }
      }
      });

score 0 · Answer 1 · answered Dec 23 '20 at 13:10

This can question can help you to group data according to date answer

After successfully grouping your data in dates, you can apply a condition check for your payment method

let updateDetails = [...];
let finalObject = {};
for(let i = 0; i < updateDetails.length ; i++ ){
  if(updateDetails[i]){
   finalObject[updateDetails[i].paymentMethod] = finalObject[updateDetails[i].paymentMethod] + updateDetails[i].paymentMethod
   //your other conditional code
  }
}

score 0 · Answer 2 · answered Dec 23 '20 at 13:15

0

You can use the reduce method to create the totals list.

new Vue({
  el: '#example',
  data: {
    orders: [
      { id: 1, date: '2020-12-21T19:37:40', total: 20, method: 'PayPal' },
      { id: 2, date: '2020-12-20T20:22:47', total: 40, method: 'Cash' },
      { id: 3, date: '2020-12-20T14:42:24', total: 15, method: 'PayPal' },
      { id: 4, date: '2020-12-20T17:02:27', total: 30, method: 'Cash' },
    ]
  },
  computed: {
    totals: function () {
      return this.orders.reduce((acc, item) => {
        const date = item.date.split('T')[0]
        let dayTotal = acc.find(total => total.date === date)
        if (!dayTotal) {
          dayTotal = {
            date,
          }
          acc.push(dayTotal)
        }

        dayTotal[item.method] = dayTotal[item.method] ? dayTotal[item.method] + item.total : item.total
        return acc
      }, [])
    }
  }
})

in this case:

Orders

[
  { id: 1, date: '2020-12-21T19:37:40', total: 20, method: 'PayPal' },
  { id: 2, date: '2020-12-20T20:22:47', total: 40, method: 'Cash' },
  { id: 3, date: '2020-12-20T14:42:24', total: 15, method: 'PayPal' },
  { id: 4, date: '2020-12-20T17:02:27', total: 30, method: 'Cash' },
]

Totals

[
  {date: "2020-12-21", PayPal: 20}
  {date: "2020-12-20", Cash: 70, PayPal: 15}
]

answered Dec 23 '20 at 13:15

BillyG

1

Hi thanks for your answer....as I am fetching the data through axios in Vue, I need to show the data when the user select the month....I can display it after the main table....so do I need to create another instance for it??? – Tom Dec 23 '20 at 14:00
Using the computed property, as soon as your fetched data is stored in the `orders` property, the `totals` would "update" too. – BillyG Dec 23 '20 at 16:08
Hi, I just copied the code and put in under Vue instance.... I am trying to show the reduce data in a HTML Table....But I am not getting any data in the table....Below is my code.... – Tom Dec 23 '20 at 18:30
{{ item.date }} {{ item.total[0] }} {{item.total[1]}} 0.00 – Tom Dec 23 '20 at 18:30
{{ item.date }} {{ item['PayPal'] ? item['PayPal'] : 0 }} {{ item['Cash'] ? item['Cash'] : 0 }} – BillyG Dec 23 '20 at 18:56
If the payment method is dynamic you will have to do something more complex – BillyG Dec 23 '20 at 18:57
@ BillyG, Hi, the payment method is not dynamic.....after using the Html code also the data is not retrieving.....But my other table is getting the data .... – Tom Dec 23 '20 at 19:01
Hi I just added the Vue part in the question with your computed function....Couldn't figure out what am i doing wrong... – Tom Dec 23 '20 at 19:18
Could you edit your question to put a sample of the data that you fetch? – BillyG Dec 23 '20 at 20:35
@Tom the `reduce` code will only work if your order object follows this structure `{ id: 4, date: '2020-12-20T17:02:27', total: 30, method: 'Cash' }`. The code has to be modified if your JSON returns a different structure for the `order` object. – BillyG Dec 24 '20 at 08:45
Hi Thanks for the clarification.....my Json objects has different titles for data such as 'date' is 'date_created' and 'method' is 'payment_method_title' – Tom Dec 25 '20 at 19:44

Get the total of cell values of rows containing same date in Javascript

2 Answers2