vuejs中嵌套循环中的总和值

Question

我正在学习 vuejs 并正在实现一个报告系统，从模拟 API 中获取一些数据并将其输出到表格中。数据返回多年的月度订单号和值。数据示例如下：https://api.myjson.com/bins/u5gp6。

我想要做的是遍历每年和每月并输出订单数和订单值，以及每年的总和。

HTML 是这样的：

<div id="app">
  <div v-for="report in reports">
    <h2>{{ report.year }}</h2>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Month</th>
          <th>Number of orders</th>
          <th>Total revenue</th>
          <th>Average order</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="value in report.values">
          <td>{{ value.month }} {{ value.year }}</td>
          <td>{{ value.orders }}</td>
          <td>£{{ value.revenue }}</td>
          <td>£{{ value.average }}</td>
        </tr>
      </tbody>
      <tfoot v-if="reports">
        <tr>
          <td>Total {{report.year }}</td>
          <td>{{ totalOrders }}</td>
          <td>£{{ totalRevenue }}</td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

JS是这样的：

const app = new Vue({
  el: '#app',
  data: {
    reports: []
  },
  created() {
    fetch('https://api.myjson.com/bins/u5gp6')
      .then(response => response.json())
      .then(json => {
      this.reports = json.reports
    });
  },
  computed: {
    totalOrders: function () {

    },
    totalRevenue: function () {

    }
  }
});

可以在这里看到一个小提琴：https://jsfiddle.net/eywraw8t/63295/

我正在努力的部分是计算每年的 totalOrders 和 totalRevenue 值。

我尝试了各种方法，例如在计算的总函数中添加一个 reduce 函数，但就是无法工作。我想我对这是一个嵌套循环感到困惑。

谁能建议如何解决这个问题，以便正确填充 totalOrders 和 totalRevenue？

非常感谢。

Answer 1

我发现使用methods 并在循环中传递当前年份的values 对象作为参数，我能够仅针对该特定年份的订单和收入调用reduce 方法，而无需每次循环遍历所有内容。生成的工作代码是……

HTML：

<div id="app">
  <div v-for="report in reports">
    <h2>{{ report.year }}</h2>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Month</th>
          <th>Number of orders</th>
          <th>Total revenue</th>
          <th>Average order</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="value in report.values">
          <td>{{ value.month }} {{ value.year }}</td>
          <td>{{ value.orders }}</td>
          <td>£{{ value.revenue }}</td>
          <td>£{{ value.average }}</td>
        </tr>
      </tbody>
      <tfoot v-if="reports">
        <tr>
          <td>Total {{report.year }}</td>
          <td>{{ totalOrders(report.values) }}</td>
          <td>£{{ totalRevenue(report.values) }}</td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

JS：

const app = new Vue({
  el: '#app',
  data: {
    reports: []
  },
  created() {
    fetch('https://api.myjson.com/bins/16731e')
      .then(response => response.json())
      .then(json => {
      this.reports = json.reports
    });
  },
  methods: {
    totalOrders: function (values) {
      return values.reduce((acc, val) => {
        return acc + parseInt(val.orders);
      }, 0);    
    },
    totalRevenue: function (values) {
      return values.reduce((acc, val) => {
        return acc + parseInt(val.revenue);
      }, 0);
    }
  }
});

工作小提琴：https://jsfiddle.net/4js8L3p9/.

Answer 2

您可以在原始数组上使用reduce，然后在每年的values 上调用reduce，获取按年份划分的销售和订单报告。

例如：

let reports = [{"year":"2018","values":[{"month":"Jan","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Feb","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Mar","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Apr","orders":"5","revenue":"50.00","average":"10.00"},{"month":"May","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Jun","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Jul","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Aug","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Sep","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Oct","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Nov","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Dec","orders":"5","revenue":"50.00","average":"10.00"}]},{"year":"2017","values":[{"month":"Jan","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Feb","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Mar","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Apr","orders":"5","revenue":"50.00","average":"10.00"},{"month":"May","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Jun","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Jul","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Aug","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Sep","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Oct","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Nov","orders":"5","revenue":"50.00","average":"10.00"},{"month":"Dec","orders":"5","revenue":"50.00","average":"10.00"}]}]

function totalRevenue(){
    return reports.reduce((obj, year) => {
      obj[year.year] = year.values.reduce((total, month) => {
        return total + parseInt(month.revenue)
      }, 0)
      return obj
    }, {})
  }
  

console.log(totalRevenue())

您可以通过将month.revenue 替换为month.orders 来对订单执行相同的操作。您也可以让函数接受 year 参数，然后只报告那一年，但如果您每年都在页面上报告，那么只循环一次可能是有意义的。

Answer 3

你可以试试这个。

var array = [
  {name: "Peter", age: 43},
  {name: "John", age: 32},
  {name: "Jake", age: 21}
];

array.reduce(function(sum, current) {
  return sum + current.age;
}, 0); // 43 + 32 + 21 = 96