如何讓我的表格正確顯示分組數據？

Question

我以為我早些解決了這個問題，但我錯了。 我有一組對象，我可以用lodash分組。 然后我創建了一個摘要表，或者我想。 我的匯總表需要與此類似

它只是按“程序”分組，並顯示了“程序”中每個公司的細分。

不幸的是，如上面的鏈接所示，該公司沒有顯示也不是每個公司的分解。 我相信我的buildSummary（）方法就是問題所在。 過去兩天我一直在處理這個問題，不能直接思考。

這是我的代碼片段：

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)
    }
  }
})

任何幫助將非常感激。 謝謝！

這是筆

只是想補充一點，TotalCount應顯示公司在其所在組中出現的次數。請忽略“總計數> 3”。

Answer 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); 

Answer 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>

JS

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