CODEWITHSUNDEEP
javascripthtmljquery
user3386779
user3386779

Reputation: 7215

get the total of the column

I have created table with json response. and I want to get the sum of the column

const pipeline= [{Geo: "APAC", SalesStage: "Proposal Submitted", count: 11, pipelinevalue: 1},
   {Geo: "NSU", SalesStage: "Proposal Submitted", count: 4, pipelinevalue: 2},
   {Geo: "Middle East", SalesStage: "Proposal Submitted", count: 17, pipelinevalue: 1},
   {Geo: "US East", SalesStage: "Proposal Submitted", count: 14, pipelinevalue: 1},
   {Geo: "Europe", SalesStage: "Proposal Submitted", count: 9, pipelinevalue: 2},
   {Geo: "US West", SalesStage: "Proposal Submitted", count: 6, pipelinevalue: 1}];
   genetateTable(pipeline,'#geo_summary thead','#geo_summary tbody',pipeval='1');
 function genetateTable(pipeline,divHeader,divBody,pipeval){
                            $.each(pipeline, function (index, item) {
                                
    const $tr = $('<tr>');
    if(pipeval=='1'){
  
  $tr.append([item.SalesStage, item.count,item.pipelinevalue].map(x => $('<td>').text(x)));
    }else{$tr.append([item.SalesStage, item.count].map(x => $('<td>').text(x)));}
  $(divBody).append($tr);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo_summary"> <thead style="background-color: #00f; color: #fff"> <tr><th style="background-color: #66cdf2; color: #000">Opportunity</th><th style="background-color: #66cdf2; color: #000">Pipeline Count</th><th style="background-color: #66cdf2; color: #000">Pipeline Value</th></tr></thead> <tbody> </tbody><tfooter><tfooter></table>

I want to get the sum of ount and pipelinevalue.

I want to append <tr><td>Total</td><td>61</td><td>8</td></tr>

in tfooter.

Upvotes: 0

Views: 44

Answers (2)

GirkovArpa
GirkovArpa

Reputation: 4942

Here is an idiomatic solution without jQuery:

const create = document.createElement.bind(document);
const query = document.querySelector.bind(document);

const pipeline = [
  { Geo: 'APAC', SalesStage: 'Proposal Submitted', count: 11, pipelinevalue: 1 },
  { Geo: 'NSU', SalesStage: 'Proposal Submitted', count: 4, pipelinevalue: 2 },
  { Geo: 'Middle East', SalesStage: 'Proposal Submitted', count: 17, pipelinevalue: 1 },
  { Geo: 'US East', SalesStage: 'Proposal Submitted', count: 14, pipelinevalue: 1 },
  { Geo: 'Europe', SalesStage: 'Proposal Submitted', count: 9, pipelinevalue: 2 },
  { Geo: 'US West', SalesStage: 'Proposal Submitted', count: 6, pipelinevalue: 1 }
];

const totals = pipeline.reduce((totals, { count, pipelinevalue }) => {
  totals.count += count;
  totals.value += pipelinevalue;
  return totals;
}, { count: 0, value: 0 });

const table = query('table');
const trTitles = create('tr');
table.append(trTitles);

['Opportunity', 'Pipeline Count', 'Pipeline Value'].forEach(title => {
  const th = create('th');
  trTitles.append(th);
  th.textContent = title;
});

pipeline.forEach(data => {
  const tr = create('tr');
  table.append(tr);

  Object.values(data).slice(1).forEach(datum => {
    const td = create('td');
    tr.append(td);
    td.textContent = datum;
  });
});

const tfoot = create('tfoot');
table.append(tfoot);
const trFoot = create('tr');
tfoot.append(trFoot);

const { count, value } = totals;

['Total', count, value].forEach(entry => {
  const td = create('td');
  trFoot.append(td);
  td.textContent = entry;
});
thead {
   background-color: #00f;
   color: #fff
 }
 
 th {
   background-color: #66cdf2;
   color: #000
 }
<!DOCTYPE html>
<html>
  <body>
    <table></table>
  </body>
</html>

Upvotes: 1

Robert Cooper
Robert Cooper

Reputation: 2250

const pipeline = [{
    Geo: "APAC",
    SalesStage: "Proposal Submitted",
    count: 11,
    pipelinevalue: 1
  },
  {
    Geo: "NSU",
    SalesStage: "Proposal Submitted",
    count: 4,
    pipelinevalue: 2
  },
  {
    Geo: "Middle East",
    SalesStage: "Proposal Submitted",
    count: 17,
    pipelinevalue: 1
  },
  {
    Geo: "US East",
    SalesStage: "Proposal Submitted",
    count: 14,
    pipelinevalue: 1
  },
  {
    Geo: "Europe",
    SalesStage: "Proposal Submitted",
    count: 9,
    pipelinevalue: 2
  },
  {
    Geo: "US West",
    SalesStage: "Proposal Submitted",
    count: 6,
    pipelinevalue: 1
  }
];
genetateTable(pipeline, '#geo_summary thead', '#geo_summary tbody', pipeval = '1');

function genetateTable(pipeline, divHeader, divBody, pipeval) {
  let totalCount = 0;
  let totalValue = 0;
  $.each(pipeline, function(index, item) {

    const $tr = $('<tr>');
    totalCount += item.count;
    totalValue += item.pipelinevalue;
    if (pipeval == '1') {

      $tr.append([item.SalesStage, item.count, item.pipelinevalue].map(x => $('<td>').text(x)));
    } else {
      $tr.append([item.SalesStage, item.count].map(x => $('<td>').text(x)));
    }
    $(divBody).append($tr);
  });
  $('#geo_summary').append($(`<tfoot><tr><td>Total</td><td>${totalCount}</td><td>${totalValue}</tr></tfoot>`))
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="geo_summary">
  <thead style="background-color: #00f; color: #fff">
    <tr>
      <th style="background-color: #66cdf2; color: #000">Opportunity</th>
      <th style="background-color: #66cdf2; color: #000">Pipeline Count</th>
      <th style="background-color: #66cdf2; color: #000">Pipeline Value</th>
    </tr>
  </thead>
  <tbody> </tbody>
  <tfooter>
    <tfooter>
</table>

Upvotes: 1

Related Questions