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

【问题标题】：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”应评估为每家公司出现在其组中的次数。我需要在我的问题中反映这一点。对此感到抱歉

标签： javascript arrays vue.js javascript-objects

【解决方案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

【讨论】：