在Javascript中获取包含相同日期的行的单元格值总数

Question

我正在为在线食品订购页面制作仪表板。作为一项功能，我需要显示每天的总订单销售额，当用户单击特定月份时按付款方式分类。 我能够获得当月的订单以及每个订单的付款方式和订单日期，但我无法在 Vanilla Js 或 Vue 中生成实际功能。

下面的图片显示了我尝试过的以及我需要实现的目标。 请有任何建议。

Vue 代码

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);
      });
      }
      }
      });

Answer 1

这个问题可以帮助您根据日期对数据进行分组 answer

成功按日期分组数据后，您可以为您的付款方式应用条件检查

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
  }
}

Answer 2

您可以使用reduce 方法创建totals 列表。

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
      }, [])
    }
  }
})

在这种情况下：

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}
]