What steps should I take to ensure that my table effectively displays grouped data?

Question

What steps should I take to ensure that my table effectively displays grouped data?

Despite thinking I had resolved this issue earlier, it seems that I was mistaken. I have an array of objects that I successfully grouped using lodash. Subsequently, I attempted to create a summary table from it which should resemble the following:

https://i.sstatic.net/wFaYq.jpg

The desired format is simply grouping by 'program' and displaying a breakdown of each company within the 'program'.

Unfortunately, the company breakdown is not displaying correctly, unlike the example in the link above. I suspect that the issue lies with my buildSummary() method. This problem has been consuming me for the past couple of days, leaving me unable to think clearly.

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

I would greatly appreciate any assistance provided. Thank you!

Here's the link to the pen

Just to clarify, the TotalCount should indicate how many times a company appears within its respective group. Please disregard 'Total Count > 3'.

javascript arrays vue.js javascript-objects

Answer 1

Answer №1

In order to achieve the desired outcome, it was necessary to create two levels of nesting: one for the program and another for the company. Additionally, some modifications were made to the template by adding a property called companies within 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 JavaScript code:

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

For more details, please visit this updated CodePen link: https://codepen.io/joyblanks/pen/oNvdgqL

Answer 2

In order to achieve the desired outcome, it was necessary to create two levels of nesting: one for the program and another for the company. Additionally, some modifications were made to the template by adding a property called companies within 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 JavaScript code:

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

For more details, please visit this updated CodePen link: https://codepen.io/joyblanks/pen/oNvdgqL

Answer 3

Answer №2

To group the data by program and company, utilize the reduce() method.

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",...

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

To group the data by program and company, utilize the reduce() method.

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",...

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

What steps should I take to ensure that my table effectively displays grouped data?

Answer №1

Answer №2

Similar questions

How do I link JavaScript with a database in Django?

Remove the JSON object from the screen in an asynchronous manner

Display a pop-up alert message when the session expires without the need to manually refresh the page

What causes the statement to be executed before the database transaction?

How do you obtain the string name of an unknown object type?

Using React to apply various filters to an array

Switch the input direction from left to right

No receiving a callback_query update upon user pressing an inline button in the Telegram webhook

What is the process for removing an added message using jQuery after it has been appended by clicking the same button?

Storing/Caching API Requests with NUXT.JS

MUI: The fontFamily property is not able to be overridden by nesting within the

What is the most effective method for generating random ocean depths on a grid using Python?

What could be causing my page to suddenly disappear?

What is the best way to arrange an array of identical objects based on a specific sub property?

Exploring the Power of BufferGeometry and Textures in Three.js

When I trigger a click event, it doesn't return anything, however, the function works perfectly when I execute a load event

It is not possible to use an index of type 'item' to subscript a value of type '[item]'

Is it possible for me to display dynamic content and utilize a template engine like (ejs)?

Decompose JSON String array into separate strings and integers

Meteor is only returning a portion of the values from the child array