javascript - 重新排列json生成的表格列顺序

Question

我已经创建了一个带有 json 数据的表，并且想要生成管道价值的总和，并且我只为按预期提交的、合格的和协商的合同进行了计数。

我只想显示水平总计和管道值我有三个值（建议提交、合格和协商的承包）。是否可以在合格的总数，管道价值，关闭赢得，横向识别。我试图将 Total forlegth >=2

var orderedObj = {"Qualified":0,
                  "Proposal Submitted":1,  
                  "Negotiation & Contracting":2, //Total,pipeline if any of the value occur in response
                  "Closed Won":3,
                  "QO under Evaluation":4,
                  "Identified":5,
                  "Deferred Opportunity":6,
                  "Closed Lost":7
                };
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}];
 //summary_data.sort((a,b)=>orderedObj[a.SalesStage] - orderedObj[b.SalesStage]);
 
summary_data.sort( function( a, b ) {
    a = a.Geo.toLowerCase();
    b = b.Geo.toLowerCase();

    return a < b ? -1 : a > b ? 1 : 0;
});
//console.log(summary_data);
// Gather the headers we'll have in the end table
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'); // ["Closed Won", "Qualified", "Identified", "Total"]
 //console.log(stages.length);
 /*
 const stages = summary_data.reduce((res, row) => {
 //console.log(res);
 //console.log(row);
                    if (!res.includes(row.SalesStage)) res.push(row.SalesStage);
                    return res;
                    }, []);
   if(stages.length>=2)       
   stages=stages..concat('Total'); //caught not able to modified const
 */
                    // Gather every field for each Geo
                    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>

标签： javascripthtmljquery