How can I get my table to display grouped data properly?

Question

I thought I fixed this issue earlier but I was wrong. I have an array of objects that I was able to group with lodash. I then created a summary table out of it, or so I thought. My summary table needed to look similar to this

It's just grouped by 'program' and shows a breakdown of each company within the 'program'.

Unfortunately, the company doesn't show nor is it a break down of each company as shown in the link above. I believe my buildSummary() method is the problem. I've been dealing with this the past two days and can't think straight.

Here's a snippet of my code:

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

Any help would be much appreciated. Thanks!

Here's the pen

Just wanted to add that TotalCount should show the number of times a company appears in the group it's in. PLEASE ignore 'Total Count > 3'.

Answer 1

You needed to two level of nesting group program then company and modify the template a little bit as well, added a property companies in every program

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

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

Updated Pen https://codepen.io/joyblanks/pen/oNvdgqL