获取HTML表的列总和

时间:2020-07-09 11:16:15

标签: javascript html jquery json

我用html响应创建了一个表,并计算了行和其他列的总和。我需要获取管道值的总和。我获得了Closed Won,Identified,qualified列的总和。 我也想要管道价值的总和。现在管道价值总和是空的。如何获取管道价值的总和。

const summary_data = [
{Geo:"US West",SalesStage:"Closed Won",count:2,pipelinevalue:356},
{Geo:"US East",SalesStage:"Closed Won",count:8,pipelinevalue:35},
{Geo:"US West",SalesStage:"Qualified",count:16,pipelinevalue:6},
{Geo:"US East",SalesStage:"Qualified",count:3,pipelinevalue:3},
{Geo:"US East",SalesStage:"Identified",count:50,pipelinevalue:6},
{Geo:"US West",SalesStage:"Identified",count:39,pipelinevalue:3},
{Geo:"NSU",SalesStage:"Identified",count:20,pipelinevalue:8}];
const stages = summary_data.reduce((res, row) => {
 //console.log(res);
 //console.log(row);
                    if (!res.includes(row.SalesStage)) res.push(row.SalesStage);
                    return res;
                    }, []).concat('Total');
                     const obj = summary_data.reduce((res, row) => {
                    if (!res[row.Geo]) {
                    res[row.Geo] = Object.fromEntries([ ['Geo', row.Geo],['Pipeline Value', row.pipelinevalue], ...stages.map(s => [s, 0]) ]);
                    }
                    res[row.Geo][row.SalesStage] += row.count;
                    if(row.SalesStage=='Proposal Submitted'||row.SalesStage=='Qualified' ||row.SalesStage=='Negotiation & Contracting')
                    res[row.Geo].Total += row.count;
                    return res;
                    }, {}); // { "US West": {}, "US East": {}, ... }

                    const geodata = Object.values(obj); // [ { "Geo": "US West", "Closed Won": 2, ...}, ...]
                    const pipelineval = summary_data.reduce((res, row) => { });
                    // Add a "Total" row
                    geodata.push({
                    Geo: 'Total',
                    PipelineValue:'',
                    ...Object.fromEntries(
                    stages.map(s => [s, geodata.reduce((sum, row) => row[s] + sum, 0)])
                    )
                    });

                    $('#geo_summary thead').append(
                    Object.keys(geodata[0]).map(x => $('<td>').text(x))
                    );
                    $('#geo_summary tbody').append(
                    geodata.map(row => $('<tr>').append(
                     Object.values(row).map(x => $('<td>').text(x))
                    ))
                    );  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo_summary"> <thead> </thead> <tbody> </tbody></table><style>table{border-collapse:collapse}td{border:1px solid #000;padding:.5em}</style>

1 个答案:

答案 0 :(得分:0)

我认为您刚刚陷入了计算:解决方案是使用reduce函数的简单添加:

const summary_data = [{
    Geo: "US West",
    SalesStage: "Closed Won",
    count: 2,
    pipelinevalue: 356
  },
  {
    Geo: "US East",
    SalesStage: "Closed Won",
    count: 8,
    pipelinevalue: 35
  },
  {
    Geo: "US West",
    SalesStage: "Qualified",
    count: 16,
    pipelinevalue: 6
  },
  {
    Geo: "US East",
    SalesStage: "Qualified",
    count: 3,
    pipelinevalue: 3
  },
  {
    Geo: "US East",
    SalesStage: "Identified",
    count: 50,
    pipelinevalue: 6
  },
  {
    Geo: "US West",
    SalesStage: "Identified",
    count: 39,
    pipelinevalue: 3
  },
  {
    Geo: "NSU",
    SalesStage: "Identified",
    count: 20,
    pipelinevalue: 8
  }
];
const stages = summary_data.reduce((res, row) => {
  //console.log(res);
  //console.log(row);
  if (!res.includes(row.SalesStage)) res.push(row.SalesStage);
  return res;
}, []).concat('Total');

const obj = summary_data.reduce((res, row) => {
  if (!res[row.Geo]) {
    res[row.Geo] = Object.fromEntries([
      ['Geo', row.Geo],
      ['Pipeline Value', row.pipelinevalue], ...stages.map(s => [s, 0])
    ]);
  }
  res[row.Geo][row.SalesStage] += row.count;
  if (row.SalesStage == 'Proposal Submitted' || row.SalesStage == 'Qualified' || row.SalesStage == 'Negotiation & Contracting')
    res[row.Geo].Total += row.count;
  return res;
}, {}); // { "US West": {}, "US East": {}, ... }


const geodata = Object.values(obj); // [ { "Geo": "US West", "Closed Won": 2, ...}, ...]

// simple addition with reduce!
const pipelineval = summary_data.reduce((a, c) => {
  a += c.pipelinevalue
  return a
}, 0);

// Add a "Total" row
geodata.push({
  Geo: 'Total',
  PipelineValue: pipelineval,
  ...Object.fromEntries(
    stages.map(s => [s, geodata.reduce((sum, row) => row[s] + sum, 0)])
  )
});

$('#geo_summary thead').append(
  Object.keys(geodata[0]).map(x => $('<td>').text(x))
);
$('#geo_summary tbody').append(
  geodata.map(row => $('<tr>').append(
    Object.values(row).map(x => $('<td>').text(x))
  ))
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo_summary">
  <thead> </thead>
  <tbody> </tbody>
</table>
<style>
  table {
    border-collapse: collapse
  }
  
  td {
    border: 1px solid #000;
    padding: .5em
  }
</style>

相关问题