Javascript 如何使表格正确显示分组数据？

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

它只是按“计划”进行分组，并显示“计划”中每个公司的明细

不幸的是，该公司并没有显示，也没有如上面链接所示的每个公司的细分。我相信我的buildSummary（）方法就是问题所在。在过去的两天里，我一直在处理这件事，不能正确思考

以下是我的代码片段：

newvue({
el:“应用程序”，
数据：{
测试：'你好'，
myData:myData，
公司摘要：{}，
myObjData:“”
},
已创建：函数（）{
这个.buildSummary（）；
},
方法：{
groupData:函数（d）{
返回u.groupBy（d，“程序”）；
},
buildSummary:function（）{
this.myObjData=this.groupData（this.myData）
console.log（this.myObjData）；
for（Object.key（this.myObjData）的常量公司）{
本公司摘要[公司]={
总数：0，
预期资金：0，
基金份额：0，
};
对于本.myObjData[公司]的（const{TotalCount，expectedFunding，fundedOnIKNS}）{
此.companiesSummary[company].totalCount+=1；
this.companyessummary[company].expectedFunding+=expectedFunding==“是”；
this.companyessummary[company].fundedOnIKNS+=fundedOnIKNS==“是”；
}
}     
console.log（this.companiesSummary）
}
}
})

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

这是我的建议

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

您可以使用方法按

程序

和

公司

对数据进行分组

var myData=[{项目：“DARC”，公司：“E”，总人数：2，预期资金：“是”，资金缺口：“是”，资金缺口：95，IKNSSWO：“结束”，接受总人数：45，VacanRecruption:34，Filled Departing:23}，{项目：“BBO”，公司：“B”，总人数：2，预期资金：“预期”，资金缺口：“是”，资金缺口：“IKNS”，IKNSSWO：“结束”，接受总数：45，真空招聘：34，填写总数：23}，{项目：“BBRC”，公司：“D公司”，总人数：2，预期资金：“否”，基金公司：“是”，billingToIKNS：“IKNS”，IKNSWO：“结束”，接受总数：45，真空招聘：34，填写总数：23}，{项目：“CCTG”，公司：“C”，总人数：2，预期资金：“是”，基金公司：“是”，billingToIKNS:95，IKNSWO:“结束”，接受总数：45，VacanRecrupting:34，Filled Departing:23}，{program:“C2”，公司：“A公司”，总数：2，预期资金：“是”，资金“否”，billingToIKNS:95，IKNSWO:23，接受总数：45，VacanRecrupting:34，Filled Departing:23}，{计划：“ERI”，公司：“C公司”，总数：2，预期资金：“是”，基金公司：“否”，基金公司：“否”，基金公司：“否”，基金公司：“否”，基金公司：95，接受总数：45，真空招聘：34，填写总数：23}，{项目：“IIRC”，公司：“F公司”，总数：2，预期资金：“是”，基金公司：“否”，基金公司：95，接受总数：45，真空招聘：34，填写总数：23}，{项目：“BBO”，公司：“G公司”，总人数：2，预期资金：“是”，资金缺口：“是”，资金缺口：“是”，资金缺口：“是”，资金缺口：“是”，资金缺口：“是”，资金缺口：95，IKNSSWO:23，接受总数：45，真空招聘：34，填写部分：23}，{计划：“DARC”，公司：“E”，总人数：3，预期资金缺口：“是”，资金缺口：“是”，资金缺口：95，IKNSSWO:23，接受总数：45，真空招聘：34，填写部分：23}，{计划：“BBO”，公司：“B公司”，总人数：3，预计资金：“否”，资金缺口：“否”，资金缺口：“是”，资金缺口：“是”，资金缺口：95，资金缺口：23，接受总数：45，真空招聘：34，填写部门：23}，{计划：“BBRC”，公司：“A公司”，总人数：3，预计资金缺口：“否”，资金缺口：“是”，资金缺口：95，资金缺口：“结束”项目：“CCTG”，公司：“C公司”，总人数：3，预期资金：“是”，基金支持：“否”，账单支持：“IKNS”，基金支持：“结束”，接受项目支持：45，填写部门：23}，{项目：“C2”，公司：“A公司”，总人数：1，预期资金：“否”，基金支持：“否”，billingToIKNS:“IKNS”，IKNsWO:23，接受总数：45，VacanRecrupting:34，Filled Departing:23}，{program:“ERI”，company:“E公司”，总数：1，Expected Funding:“Expected”，FundeDoikns:“No”，billingToIKNS:95，IKNsWO:“OVER”，接受总数：45，VacanRecrupting:34，Filled Departing:23}，{program:“IIRC”，company:“F公司”，总人数：1，预期资金：“是”，资金缺口：“是”，资金缺口：“是”，资金缺口：“是”，资金缺口：“是”，资金缺口：“结束”，接受总数：45，VacanRecrupting:34，Filled Departing:23}，{计划：“BBO”，公司：“G”，总人数：1，预期资金缺口：“是”，资金缺口：“是”，资金缺口：“IKNS”，IKNSSWO：“结束”，接受总数：45，VacanRecrupting:34，Filled Departing:23}，{项目：“DARC”，公司：“D公司”，总人数：1，预期资金：“否”，基金：“否”，billingToIKNS：“IKNS”，IKNSwo：“结束”，接受总数：45，VacanRecruption:34，Filled Departing:23}，{项目：“BBO”，公司：“B公司”，总人数：1，预期资金：“否”，基金：“否”，billingToIKNS：“IKNS”，IKNSSWO:23，接受总数：45，VacanRecrupting:34，Filled Departing:23}，{项目：“BBRC”，公司：“A公司”，总数：1，预期资金：“否”，基金份额：“是”，billingToIKNS:95，IKNSSWO:“结束”，接受总数：45，VacanRecrupting:34，Filled Departing:23}，{项目：“CCTG”，公司：“A公司”，总数：1，预期资金：“否”，基金份额：“是”，billingToIKNS:95，IKNSSWO:23，接受总数：45，VacanRecrupting:34，Filled Departing:23}，{计划：“C2”，公司：“D公司”，总数：1，预期资金：“否”，FundeDoikns:“是”，billingToIKNS:“IKNS”，IKNSSWO:23，接受总数：45，VacanRecrupting:34，Filled Departing:23}，{计划：“ERI”，公司：“C公司”，总数：3，预期资金：“没有”，资金
<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)
    }
  }
})