如何从一些JSON数据中获取一列的总和？

Question

我想从JSON数据中获得数据的总和，我已经创建了JSON数据的表格视图，并想获得各个行的总和。我想得到以下数据的总和 week1, week2, week3和 week4.

const input = {
  "data_report": [{
      "data": [1, 2, 0, 3],
      "label": "Test1",
      "backgroundColor": "blue"
    },
    {
      "data": [3, 4, 2, 5],
      "label": "test2",
      "backgroundColor": "#a3eaae"
    },
    {
      "data": [2, 3, 1, 4],
      "label": "test3",
      "backgroundColor": "#37bd11"
    },
    {
      "data": [1, 2, 0, 3],
      "label": "test4",
      "backgroundColor": "#43bee3"
    },
    {
      "data": [1, 2, 0, 3],
      "label": "test5",
      "backgroundColor": "#a3eaae"
    },
    {
      "data": [0, 1, 0, 2],
      "label": "test6",
      "backgroundColor": "#1195bd"
    },
    {
      "data": [0, 1, 0, 2],
      "label": "test7",
      "backgroundColor": "#aeb5b7"
    },
    {
      "data": [1, 2, 0, 3],
      "label": "test8",
      "backgroundColor": "pink"
    }
  ],
  "weeks": ["Week 1 ", "Week 2 ", "Week 3 ", "Week 4 "]
}

let thString = input.weeks.reduce((res, h) => res + '<th>' + h + '</th>', "<th></th>");

$('#thead').html(thString);

input.data_report.forEach(tr => {
  const trString = "<td>" + tr.label + "</td>" + tr.data.reduce((res, d) => res + '<td>' + d + '</td>', "");
  $('#tbody').append("<tr>" + trString + "</tr>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead id="thead"></thead>
  <tbody id="tbody"></tbody>
  <tbody id="tfooter"></tbody>
</table>

Answer 1

你可以得到你的脚步与嵌套的累计超过了。weeks 的值，将每项的对应值相加。data 数组。

const input = {
  "data_report": [{
      "data": [1, 2, 0, 3],
      "label": "Test1",
      "backgroundColor": "blue"
    },
    {
      "data": [3, 4, 2, 5],
      "label": "test2",
      "backgroundColor": "#a3eaae"
    },
    {
      "data": [2, 3, 1, 4],
      "label": "test3",
      "backgroundColor": "#37bd11"
    },
    {
      "data": [1, 2, 0, 3],
      "label": "test4",
      "backgroundColor": "#43bee3"
    },
    {
      "data": [1, 2, 0, 3],
      "label": "test5",
      "backgroundColor": "#a3eaae"
    },
    {
      "data": [0, 1, 0, 2],
      "label": "test6",
      "backgroundColor": "#1195bd"
    },
    {
      "data": [0, 1, 0, 2],
      "label": "test7",
      "backgroundColor": "#aeb5b7"
    },
    {
      "data": [1, 2, 0, 3],
      "label": "test8",
      "backgroundColor": "pink"
    }
  ],
  "weeks": ["Week 1 ", "Week 2 ", "Week 3 ", "Week 4 "]
}

let thString = input.weeks.reduce((res, h) => res + '<th>' + h + '</th>', "<th></th>");

$('#thead').html(thString);

input.data_report.forEach(tr => {
  const trString = "<td>" + tr.label + "</td>" + tr.data.reduce((res, d) => res + '<td>' + d + '</td>', "");
  $('#tbody').append("<tr>" + trString + "</tr>");
});

const tfString = input.weeks.reduce((res, _, i) => res + '<td>' + input.data_report.reduce((a, v) => a + v.data[i], 0) + '</td>', '<td>Total</td>');
$('#tfooter').append('<tr>' + tfString + '</tr>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead id="thead"></thead>
  <tbody id="tbody"></tbody>
  <tbody id="tfooter"></tbody>
</table>

Answer 2

你可以使用下面的函数来获得按每周排序的周报，如下所示。

function getWeeklyReport(data = {}) {
    const {data_report = [], weeks = []} = data

    let weeklyReport = Array(weeks.length).fill(0);

    weeklyReport = data_report.reduce((total, current) => {
        const {data} = current;
        total = total.map((week, index) => (week + data[index]))

        return total;

    }, weeklyReport);

    return weeklyReport;
}

getWeeklyReport(input);  // [9, 17, 3, 25]

const input = {
  "data_report": [{
      "data": [1, 2, 0, 3],
      "label": "Test1",
      "backgroundColor": "blue"
    },
    {
      "data": [3, 4, 2, 5],
      "label": "test2",
      "backgroundColor": "#a3eaae"
    },
    {
      "data": [2, 3, 1, 4],
      "label": "test3",
      "backgroundColor": "#37bd11"
    },
    {
      "data": [1, 2, 0, 3],
      "label": "test4",
      "backgroundColor": "#43bee3"
    },
    {
      "data": [1, 2, 0, 3],
      "label": "test5",
      "backgroundColor": "#a3eaae"
    },
    {
      "data": [0, 1, 0, 2],
      "label": "test6",
      "backgroundColor": "#1195bd"
    },
    {
      "data": [0, 1, 0, 2],
      "label": "test7",
      "backgroundColor": "#aeb5b7"
    },
    {
      "data": [1, 2, 0, 3],
      "label": "test8",
      "backgroundColor": "pink"
    }
  ],
  "weeks": ["Week 1 ", "Week 2 ", "Week 3 ", "Week 4 "]
}

function getWeeklyReport(data = {}) {
    const {data_report = [], weeks = []} = data
    
    let weeklyReport = Array(weeks.length).fill(0);

    weeklyReport = data_report.reduce((total, current) => {
        const {data} = current;
        total = total.map((week, index) => (week + data[index]))
         
        return total;
    
    }, weeklyReport);

    return weeklyReport;

};

const weeklyReport = getWeeklyReport(input);

console.log({ weeklyReport })