How To render HTML Table with two Json data

Question

I have to render a HTML table from two JSON Data as per user requirement i have to get data from two queries independently so i am getting two json data

almost 85% work is done just facing issue to remder some values from data2

Snippet

 var data = [{ "outlet": "S0001", "brandcode": "B0002", "brandname": "Bakery FG", "grn": 5810 }, { "outlet": "S0001", "brandcode": "B0003", "brandname": "Finished Goods", "grn": 5895 }, { "outlet": "S0001", "brandcode": "B0004", "brandname": "Pastry & Cake FG", "grn": 162810 }, { "outlet": "S0001", "brandcode": "B0005", "brandname": "Ice Cream FG", "grn": 281591 }, { "outlet": "S0001", "brandcode": "B0006", "brandname": "North Indian FG", "grn": 3824 }, { "outlet": "S0002", "brandcode": "B0002", "brandname": "Bakery FG", "grn": 7848 }, { "outlet": "S0002", "brandcode": "B0003", "brandname": "Finished Goods", "grn": 6970 }, { "outlet": "S0002", "brandcode": "B0004", "brandname": "Pastry & Cake FG", "grn": 136450 }, { "outlet": "S0002", "brandcode": "B0005", "brandname": "Ice Cream FG", "grn": 242644 }, { "outlet": "S0002", "brandcode": "B0006", "brandname": "North Indian FG", "grn": 8618 } ] var data2 = [{ "netAmount": 587714 // i am trying to populate this on netAmount of S0001 "outlet": "S0001" }, { "netAmount": 115257, "outlet": "S0002" // i am trying to populate this on netAmount of S0002 and total of S0001+S0002=individual sales Total } ] let formatData = function(data) { let brandcodes = []; let outlets = []; data.forEach(element => { if (brandcodes.indexOf(element.brandcode) == -1) { brandcodes.push(element.brandcode); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, brandcodes: brandcodes, outlets: outlets, }; }; var totalSalesPercentage = ''; //this one is to display percentage for Total column var olWiseSalesPercentage = ''; // tghis one is to show percentage for outlet columns let renderTable = function(data) { brandcodes = data.brandcodes; outlets = data.outlets; data = data.data; let tbl = document.getElementById("BillCountTable"); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; //this is grand total for total column let grandNetAmount = 0; //this is the one to populate all total of netamount let outletWiseTotal = {}; //this one is outlet wise total object let outletWiseNetamount = {}; //and this one to populate outlet wise netamount th = document.createElement("th"); th.colSpan = 2; th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.colSpan = 2; th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; //this one is to store olwise total whatr i am looking for to calculate percentage // outletWiseNetamount[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.grn); // outletWiseNetamount[element] += parseInt(el.netAmount); } }); grandTotal += outletWiseTotal[element]; // grandNetAmount += outletWiseNetamount[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = ""; headerRow.appendChild(th); for (i = 0; i < outlets.length + 1; i++) { th = document.createElement("th"); th.innerHTML = "Sales"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Grn Entery"; th.classList.add("text-center"); headerRow.appendChild(th); } headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); headerRow = document.createElement("tr"); td = document.createElement("th"); td.innerHTML = "Total"; td.classList.add("text-center"); headerRow.appendChild(td); let el1 = 0; outlets.forEach(element => { td = document.createElement("th"); td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); if (element.outlet == element) { el1 = element.netAmount; // outletWiseNetamount[element] += parseInt(el.netAmount); console.log(el1) } console.log(el1) td = document.createElement("th"); td.innerHTML = "netAmount"; //this one is net amount outlet wise which i am getting in data2 td.classList.add("text-right"); headerRow.appendChild(td); }); td = document.createElement("th"); td.innerHTML = "individual sales Total"; //this is also net amount but it is the sum of ll net amount outlet wise td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); brandcodes.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; let totalBCount = 0; outlets.forEach(outlet => { let el = 0; let bc = 0; data.forEach(d => { if (d.brandcode == element && d.outlet == outlet) { total += parseInt(d.grn); totalBCount += parseInt(d.billcount); el = d.grn; bc = d.billcount; } }); olWiseSalesPercentage = (el / outletWiseTotal[outlet]) * 100 // calculating percentage for Total column console.log("value :-" + olWiseSalesPercentage) td = document.createElement("td"); td.innerHTML = el.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); //console.log("ol wise data -:" +el) td = document.createElement("td"); td.innerHTML = olWiseSalesPercentage.toFixed(2) + "%"; td.classList.add("text-right"); row.appendChild(td); }); totalSalesPercentage = (total / grandTotal) * 100 // calculating percentage for Total column const totalSalesPercentageFix = totalSalesPercentage.toFixed(2) + "%" td = document.createElement("td"); td.innerHTML = totalSalesPercentageFix; td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = total.toLocaleString('en-IN'); td.classList.add("text-right"); 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"); table.classList.add("table-hover"); } let formatedData = formatData(data); renderTable(formatedData); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <div align="center"> <table id=BillCountTable> </table> </div> 

At the place of netAmount i want to put netAmount of data2 json and then calculate there sum and render it to indiuvidual sales Total =netamount of S0001+netamount of S0002

My code is bit of lengthy that's why i have commented all the lines to know you all what i am doing where

anyone out here please help

Answer 1

Just the pass the data2 array inside render table function then filter with outlets respected

td.innerHTML =data2.filter(a=> a.outlet == element)[0]['netAmount']

For individual sales total

td.innerHTML = data2.reduce((a,b)=> (a = a+b.netAmount,a),0); 

 var data = [{ "outlet": "S0001", "brandcode": "B0002", "brandname": "Bakery FG", "grn": 5810 }, { "outlet": "S0001", "brandcode": "B0003", "brandname": "Finished Goods", "grn": 5895 }, { "outlet": "S0001", "brandcode": "B0004", "brandname": "Pastry & Cake FG", "grn": 162810 }, { "outlet": "S0001", "brandcode": "B0005", "brandname": "Ice Cream FG", "grn": 281591 }, { "outlet": "S0001", "brandcode": "B0006", "brandname": "North Indian FG", "grn": 3824 }, { "outlet": "S0002", "brandcode": "B0002", "brandname": "Bakery FG", "grn": 7848 }, { "outlet": "S0002", "brandcode": "B0003", "brandname": "Finished Goods", "grn": 6970 }, { "outlet": "S0002", "brandcode": "B0004", "brandname": "Pastry & Cake FG", "grn": 136450 }, { "outlet": "S0002", "brandcode": "B0005", "brandname": "Ice Cream FG", "grn": 242644 }, { "outlet": "S0002", "brandcode": "B0006", "brandname": "North Indian FG", "grn": 8618 } ]; var data2 = [{ "netAmount": 587714, "outlet": "S0001" }, { "netAmount": 115257, "outlet": "S0002" } ] let formatData = function(data) { let brandcodes = []; let outlets = []; data.forEach(element => { if (brandcodes.indexOf(element.brandcode) == -1) { brandcodes.push(element.brandcode); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, brandcodes: brandcodes, outlets: outlets, }; }; var totalSalesPercentage = ''; //this one is to display percentage for Total column var olWiseSalesPercentage = ''; // tghis one is to show percentage for outlet columns let renderTable = function(data, data2) { brandcodes = data.brandcodes; outlets = data.outlets; data = data.data; let tbl = document.getElementById("BillCountTable"); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; //this is grand total for total column let grandNetAmount = 0; //this is the one to populate all total of netamount let outletWiseTotal = {}; //this one is outlet wise total object let outletWiseNetamount = {}; //and this one to populate outlet wise netamount th = document.createElement("th"); th.colSpan = 2; th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.colSpan = 2; th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; //this one is to store olwise total whatr i am looking for to calculate percentage // outletWiseNetamount[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.grn); // outletWiseNetamount[element] += parseInt(el.netAmount); } }); grandTotal += outletWiseTotal[element]; // grandNetAmount += outletWiseNetamount[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = ""; headerRow.appendChild(th); for (i = 0; i < outlets.length + 1; i++) { th = document.createElement("th"); th.innerHTML = "Sales"; th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Grn Entery"; th.classList.add("text-center"); headerRow.appendChild(th); } headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); headerRow = document.createElement("tr"); td = document.createElement("th"); td.innerHTML = "Total"; td.classList.add("text-center"); headerRow.appendChild(td); let el1 = 0; outlets.forEach(element => { console.log(element) td = document.createElement("th"); td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); if (element.outlet == element) { el1 = element.netAmount; // outletWiseNetamount[element] += parseInt(el.netAmount); } td = document.createElement("th"); td.innerHTML = data2.filter(a => a.outlet == element)[0]['netAmount']; //this one is net amount outlet wise which i am getting in data2 td.classList.add("text-right"); headerRow.appendChild(td); }); td = document.createElement("th"); td.innerHTML = data2.reduce((a, b) => (a = a + b.netAmount, a), 0); //this is also net amount but it is the sum of ll net amount outlet wise td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); brandcodes.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; let totalBCount = 0; outlets.forEach(outlet => { let el = 0; let bc = 0; data.forEach(d => { if (d.brandcode == element && d.outlet == outlet) { total += parseInt(d.grn); totalBCount += parseInt(d.billcount); el = d.grn; bc = d.billcount; } }); olWiseSalesPercentage = (el / outletWiseTotal[outlet]) * 100 // calculating percentage for Total column td = document.createElement("td"); td.innerHTML = el.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); //console.log("ol wise data -:" +el) td = document.createElement("td"); td.innerHTML = olWiseSalesPercentage.toFixed(2) + "%"; td.classList.add("text-right"); row.appendChild(td); }); totalSalesPercentage = (total / grandTotal) * 100 // calculating percentage for Total column const totalSalesPercentageFix = totalSalesPercentage.toFixed(2) + "%" td = document.createElement("td"); td.innerHTML = totalSalesPercentageFix; td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = total.toLocaleString('en-IN'); td.classList.add("text-right"); 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"); table.classList.add("table-hover"); } let formatedData = formatData(data); renderTable(formatedData, data2); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <div align="center"> <table id=BillCountTable> </table> </div> 

Answer 2

The above code is creating the dom elements via JS. Instead, we can combine the two different responses based on the requirement and use BootstrapTable plugin or could use a templating strategy like handlebars, which would make the code clean.