I have an HTML table which have some data. I am converting that data into percentage to populate them into HTML table on UI.
What I have done so far:
- Used the basic formula to calculate the percentage i.e
(no./total)100 - it is giving me right result for header row i.e for one row.
- for second row I am applying the same formula but getting some wrong result
Snippet
const data = [
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
{
"amount": 104801,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM"
},
{
"amount": 138151,
"billdate": "2018-08-04",
"outlet": "KOLAR"
},
{
"amount": 628358,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR"
},
{
"amount": 115223,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM"
},
{
"amount": 134107,
"billdate": "2018-08-05",
"outlet": "KOLAR"
},
{
"amount": 177866,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR"
},
{
"amount": 66095,
"billdate": "2018-08-06",
"outlet": "KOLAR"
}
]
const formatData = function(data) {
const billdates = []
const outlets = []
data.forEach(element => {
if (billdates.indexOf(element.billdate) == -1) {
billdates.push(element.billdate)
}
if (outlets.indexOf(element.outlet) == -1) {
outlets.push(element.outlet)
}
})
return {
data,
billdates,
outlets,
}
}
const renderTable = function(data) {
billdates = data.billdates
outlets = data.outlets
data = data.data
const tbl = document.getElementById('tbl')
const table = document.createElement('table')
const thead = document.createElement('thead')
let headerRow = document.createElement('tr')
let th = document.createElement('th')
th.innerHTML = 'Bill_____Date'
headerRow.appendChild(th)
let grandTotal = 0
const outletWiseTotal = {}
th = document.createElement('th')
th.innerHTML = 'Total1'
headerRow.appendChild(th)
outlets.forEach(element => {
th = document.createElement('th')
th.innerHTML = element
headerRow.appendChild(th)
outletWiseTotal[element] = 0
data.forEach(el => {
if (el.outlet == element) {
outletWiseTotal[element] += parseInt(el.amount)
}
})
grandTotal += outletWiseTotal[element]
})
thead.appendChild(headerRow)
headerRow = document.createElement('tr')
th = document.createElement('th')
th.innerHTML = 'Total'
headerRow.appendChild(th)
outlets.forEach(element => {
th = document.createElement('th')
// console.log(outletWiseTotal[element]);
const test = (outletWiseTotal[element] / grandTotal) * 100
const fix = `${test.toFixed(2)}%`
console.log(fix) // this one is giving me right result for row "Total"
th.innerHTML = fix
th.classList.add('text-right')
// ol wise total
headerRow.appendChild(th)
})
th = document.createElement('th')
th.innerHTML = '100%' // grandTotal
th.classList.add('text-right')
// grand total
headerRow.insertBefore(th, headerRow.children[1])
thead.appendChild(headerRow)
table.appendChild(thead)
const tbody = document.createElement('tbody')
billdates.forEach(element => {
const row = document.createElement('tr')
td = document.createElement('td')
td.innerHTML = element
row.appendChild(td)
let total = 0
outlets.forEach(outlet => {
let el = 0
data.forEach(d => {
if (d.billdate == element && d.outlet == outlet) {
total += parseInt(d.amount)
el = d.amount
}
})
td.classList.add('text-right')
const test1 = (el / total) * 100
console.log(test1) // this one is giving some wrong result for first column it is giving 100% which is wrong
td = document.createElement('td')
td.innerHTML = el.toLocaleString('en-in')
row.appendChild(td)
})
td = document.createElement('td')
td.innerHTML = '100%' // total date wise
td.classList.add('text-right')
console.log(total) // total date wise
row.insertBefore(td, row.children[1])
tbody.appendChild(row)
})
table.appendChild(tbody)
tbl.innerHTML = ''
tbl.appendChild(table)
table.classList.add('table')
table.classList.add('table-striped')
table.classList.add('table-bordered')
}
const formatedData = formatData(data)
renderTable(formatedData)<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="tbl"></div>Please check out the snippet; for more clarification I have put console there which is giving
100My table is fully dynamic.
I am using the right approach but getting some wrong data.
