如何让我的表格正确显示分组数据？

Posted 2023-02-22

技术标签:

【中文标题】如何让我的表格正确显示分组数据？【英文标题】：How can I get my table to display grouped data properly? 【发布时间】：2020-01-12 21:19:35 【问题描述】：

我以为我早先解决了这个问题，但我错了。我有一组对象，我可以用 lodash 进行分组。然后我用它创建了一个汇总表，或者我是这么想的。我的汇总表需要与此类似

它只是按“计划”分组，并显示“计划”内每个公司的细分。

不幸的是，该公司没有显示，也不是每个公司的细分，如上面的链接所示。我相信我的 buildSummary() 方法是问题所在。过去两天我一直在处理这个问题，无法思考。

这是我的代码的 sn-p：

new Vue(
  el: "#app",
  data: 
    test:'hello',
    myData: myData,
    companiesSummary: ,
    myObjData: ''
  ,
  created: function()
    this.buildSummary();
  ,
  methods: 
    groupData: function(d)
      return _.groupBy(d, "program");
    ,
    buildSummary: function()
      this.myObjData = this.groupData(this.myData)
      console.log(this.myObjData);
      for (const company of Object.keys(this.myObjData)) 
        this.companiesSummary[company] = 
          totalCount: 0,
          expectedFunding: 0,
          fundedOnIKNS: 0,
        ;

        for (const  TotalCount, expectedFunding, fundedOnIKNS  of this.myObjData[company]) 
            this.companiesSummary[company].totalCount += 1;
            this.companiesSummary[company].expectedFunding += expectedFunding === "Yes";
            this.companiesSummary[company].fundedOnIKNS += fundedOnIKNS === "Yes";
        
           
      console.log(this.companiesSummary)
    
  
)

任何帮助将不胜感激。谢谢！

这是pen

只是想补充一点，TotalCount 应该显示公司出现在其所在组中的次数。请忽略“Total Count > 3”。

【问题讨论】：

你能提取一个sn-p并发布它，不知道你的json是什么样子刚刚在问题中添加了一支笔发布了答案让我知道它是否有效 @joyBlanks 为迟到的回复道歉。我得到一个未定义的undefined: ..., __ob__:Observer 此外，“totalCount”应评估为每家公司出现在其组中的次数。我需要在我的问题中反映这一点。对此感到抱歉 【参考方案1】：

您可以使用reduce() 方法将数据按program 和company 分组。

var myData = [program: "DARC",company: "company E",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBO",company: "company B",TotalCount: 2,expectedFunding: "Expected",fundedOnIKNS: "Yes",billingToIKNS: "IKNS",IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBRC",company: "company D",TotalCount: 2,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: "IKNS",IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "CCTG",company: "company C",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "C2",company: "company A",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "ERI",company: "company C",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "IIRC",company: "company F",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBO",company: "company G",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "DARC",company: "company E",TotalCount: 3,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBO",company: "company B",TotalCount: 3,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBRC",company: "company A",TotalCount: 3,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "CCTG",company: "company C",TotalCount: 3,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: "IKNS",IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "C2",company: "company A",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: "IKNS",IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "ERI",company: "company E",TotalCount: 1,expectedFunding: "Expected",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "IIRC",company: "company F",TotalCount: 1,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBO",company: "company G",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: "IKNS",IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,   program: "DARC",company: "company D",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: "IKNS",IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBO",company: "company B",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: "IKNS",IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBRC",company: "company A",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "CCTG",company: "company A",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "C2",company: "company D",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: "IKNS",IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "ERI",company: "company C",TotalCount: 3,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: "IKNS",IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "IIRC",company: "company A",TotalCount: 3,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: "IKNS",IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBO",company: "company C",TotalCount: 3,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "ERI",company: "company E",TotalCount: 3,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "DARC",company: "company D",TotalCount: 3,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23,program: "BBO",company: "company B",TotalCount: 5,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBRC",company: "company B",TotalCount: 5,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "CCTG",company: "company A",TotalCount: 5,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "C2",company: "company B",TotalCount: 5,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23,program: "ERI",company: "company C",TotalCount: 5,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23,program: "IIRC",company: "company F",TotalCount: 5,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23,program: "BBO",company: "company G",TotalCount: 5,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "DARC",company: "company D",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO:  "OVER",AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23,program: "BBO",company: "company B",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23,program: "BBRC",company: "company C",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "CCTG",company: "company B",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "C2",company: "company B",TotalCount: 2,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO:  "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "ERI",company: "company E",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO:  "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "IIRC",company: "company F",TotalCount: 1,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBO",company: "company G",TotalCount: 1,expectedFunding: "Yes",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO:  "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "DARC",company: "company C",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBO",company: "company B",TotalCount: 4,expectedFunding: "Yes",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "BBRC",company: "company C",TotalCount: 4,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "CCTG",company: "company D",TotalCount: 4,expectedFunding: "Expected",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "C2",company: "company B",TotalCount: 4,expectedFunding: "Yes",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 21,program: "ERI",company: "company B",TotalCount: 4,expectedFunding: "No",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23,program: "IIRC",company: "company A",TotalCount: 4,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23,program: "BBO",company: "company C",TotalCount: 4,expectedFunding: "No",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO:  "OVER",AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23,program: "ERI",company: "company E",TotalCount: 1,expectedFunding: "Expected",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO:  "OVER",AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 232];

let result = myData.reduce((arr, currentValue) => 

  let item = arr.find(item =>
    item.program === currentValue.program &&
    item.company === currentValue.company);

  if (item) 
    item.expectedFunding += (currentValue.expectedFunding === "Yes" ? 1 : 0);
    item.fundedOnIKNS += (currentValue.fundedOnIKNS === "Yes" ? 1 : 0);
    item.TotalCount += currentValue.TotalCount;
   else 
    arr.push(
     "program": currentValue.program,
     "company": currentValue.company,
     "TotalCount": currentValue.TotalCount,
     "expectedFunding": (currentValue.expectedFunding === "Yes" ? 1 : 0),
     "fundedOnIKNS": (currentValue.fundedOnIKNS === "Yes" ? 1 : 0),
    );
  

  return arr;
, []);


var summary = result.reduce((obj, currentValue) =>       
  var program = currentValue.program;
  
  if(!obj.hasOwnProperty(program)) 
      obj[program] = [];
  
  
  delete currentValue.program;
  obj[program].push(currentValue);
  
  return obj;
, );


console.log(summary);

【讨论】：

感谢您的回复。总数始终相同，我无法修改它以获得正确的值。 "totalCount": currentValue.TotalCount, "totalCount" 应计算为公司出现在其组中的次数。" @OLA - 我编辑了答案以更新totalCount。看看吧。感谢您的帮助。【参考方案2】：

你需要两级嵌套组program 然后company 并稍微修改模板，在每个程序中添加一个物业公司

<div id="app">
  <table border="1">
    <tr>
      <td>Program&nbsp;</td>
      <td></td>
      <td>Company</td>
      <td>Expected Fund</td>
      <td>Fund on IKNS</td>
      <td>Total Count</td>
    </tr>
    <template v-for="(value) in companiesSummary">
      <tr style="text-align:left">
        <th colspan="6">value.program</th>
      </tr>
      <template v-for="(value) in value.companies">
        <tr>
          <td></td>
          <td></td>
          <td>value.company</td>
          <td>value.totalCount</td>
          <td>value.expectedFunding</td>
          <td>value.fundedOnIKNS</td>
        </tr>
      </template>
    </template>
</div>

new Vue(
  el: "#app",
  data: 
    test: 'hello',
    myData: myData,
    companiesSummary: ,
    myObjData: ''
  ,
  created: function () 
    this.buildSummary();
  ,
  methods: 
    groupData: function (d, mode) 
      return _.groupBy(d, mode);
    ,
    buildSummary: function () 
      let programGroup = this.groupData(this.myData, 'program');
      let programCompanyGroup = null;
      let companies = [];
      let summary = ;
      for (const program of Object.keys(programGroup)) 
        programCompanyGroup = this.groupData(programGroup[program], 'company');
        for (const company of Object.keys(programCompanyGroup)) 
          summary =  program, company, totalCount: 0, expectedFunding: 0, fundedOnIKNS: 0 ;
          for (const data of programCompanyGroup[company]) 
            summary.totalCount += data.TotalCount;
            summary.expectedFunding += data.expectedFunding === "Yes";
            summary.fundedOnIKNS += data.fundedOnIKNS === "Yes";
          
          companies.push(summary);
        
        this.companiesSummary[program] =  companies, program ;
        companies = [];
      
      console.table(this.companiesSummary)
    
  
)

更新笔https://codepen.io/joyblanks/pen/oNvdgqL

【讨论】：

以上是关于如何让我的表格正确显示分组数据？的主要内容，如果未能解决你的问题，请参考以下文章

NSFetchedResultsController 并正确分组

Oracle里面如何让一段日期按周、月、季度、年分组显示啊？求高手赐教，贴出正确sql追加高分！

如何在网格/表格中显示分组/分类缩略图，如布局

如何按列对数据框进行分组？

如何用EXCEL进行数据分组

R语言使用gt包和gtExtras包优雅地漂亮地显示表格数据：gtExtras包的gt_sparkline函数以表格的形式可视化分组数据的线图（line plot）包含分组类别分组类别对应的数值