我有一个来自 JSON 数据的 HTML 表格，我的表格有点复杂，我已经完成了几乎所有的工作，但在某些领域遇到了问题
这是我得到的 JSON 的一个对象
{
"outlet": "S0009", //this one is outlet
"brandcode": "B0003",//brandCode by which i am looping tbody to populate brand name
"brandname": "Finished Goods",
"transactionType": "TransferIn", //this shows transaction type TransferIn or Sales
"netamount": 12740 // this is the net amount
},
{
"outlet": "S0009",
"brandcode": "NA",//when brandcode and brand name are NA and transactionType is Sales
"brandname": "NA",//i want to populates the netamount of this object in Sales column
"transactionType": "Sales",
"netamount": 421079
}
- 为了更好地理解，我展示了我的 json 的两个对象，例如它们的样子
- 这是我正在尝试制作的表格类型
- 我的 JSON 中有几个数据作为对象，因此
brandcode and brandname as NA当这种情况发生时，我想在销售列的位置显示净额，目前我正在硬编码为transactionTypesalesnet amount outlet wise - 有时它会提供数据，否则我必须在我的图像中输入 0，因为我没有任何出口销售，
S0010所以必须显示 0 transactionType==sales与出口时相同，S0010我必须显示 grnEntery 列，因为0Grn entery 仅相当于transactionType==TransferIn
我的代码
var data = [{
"outlet": "S0001",
"brandcode": "B0002",
"brandname": "Bakery FG",
"transactionType": "TransferIn",
"netamount": 5810
},
{
"outlet": "S0001",
"brandcode": "B0003",
"brandname": "Finished Goods",
"transactionType": "TransferIn",
"netamount": 5895
},
{
"outlet": "S0001",
"brandcode": "B0004",
"brandname": "Pastry & Cake FG",
"transactionType": "TransferIn",
"netamount": 162810
},
{
"outlet": "S0001",
"brandcode": "B0005",
"brandname": "Ice Cream FG",
"transactionType": "TransferIn",
"netamount": 281591
},
{
"outlet": "S0001",
"brandcode": "B0006",
"brandname": "North Indian FG",
"transactionType": "TransferIn",
"netamount": 3824
},
{
"outlet": "S0001",
"brandcode": "NA",
"brandname": "NA",
"transactionType": "Sales",
"netamount": 1760544
},
{
"outlet": "S0002",
"brandcode": "B0002",
"brandname": "Bakery FG",
"transactionType": "TransferIn",
"netamount": 7848
},
{
"outlet": "S0002",
"brandcode": "B0003",
"brandname": "Finished Goods",
"transactionType": "TransferIn",
"netamount": 6970
},
{
"outlet": "S0002",
"brandcode": "B0004",
"brandname": "Pastry & Cake FG",
"transactionType": "TransferIn",
"netamount": 136450
},
{
"outlet": "S0002",
"brandcode": "B0005",
"brandname": "Ice Cream FG",
"transactionType": "TransferIn",
"netamount": 242644
},
{
"outlet": "S0002",
"brandcode": "B0006",
"brandname": "North Indian FG",
"transactionType": "TransferIn",
"netamount": 8618
},
{
"outlet": "S0002",
"brandcode": "NA",
"brandname": "NA",
"transactionType": "Sales",
"netamount": 332872
},
{
"outlet": "S0009",
"brandcode": "B0002",
"brandname": "Bakery FG",
"transactionType": "TransferIn",
"netamount": 15468
},
{
"outlet": "S0009",
"brandcode": "B0003",
"brandname": "Finished Goods",
"transactionType": "TransferIn",
"netamount": 12740
},
{
"outlet": "S0009",
"brandcode": "B0004",
"brandname": "Pastry & Cake FG",
"transactionType": "TransferIn",
"netamount": 256030
},
{
"outlet": "S0009",
"brandcode": "B0005",
"brandname": "Ice Cream FG",
"transactionType": "TransferIn",
"netamount": 389645
},
{
"outlet": "S0009",
"brandcode": "B0006",
"brandname": "North Indian FG",
"transactionType": "TransferIn",
"netamount": 8778
},
{
"outlet": "S0009",
"brandcode": "NA",
"brandname": "NA",
"transactionType": "Sales",
"netamount": 421079
},
{
"outlet": "S0010",
"brandcode": "B0006",
"brandname": "North Indian FG",
"transactionType": "TransferIn",
"netamount": 50
}
]
let formatData = function(data) {
let brandnames = [];
let outlets = [];
data.forEach(element => {
if (brandnames.indexOf(element.brandname) == -1 && (element.brandname) !== "NA") { //taking brandname which do not have bradname===NA
brandnames.push(element.brandname);
}
if (outlets.indexOf(element.outlet) == -1) {
outlets.push(element.outlet);
}
});
return {
data: data,
brandnames: brandnames,
outlets: outlets,
};
};
let renderTable = function(data) {
brandnames = data.brandnames;
outlets = data.outlets;
data = data.data;
let tbl = document.getElementById("ConsumptionTable");
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;
let grandNetAmount = 0;
let outletWiseTotal = {};
let outletWiseNetamount = {};
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; // populating outlet i.e S0001,S0002,S0003 and S0009
th.classList.add("text-center");
headerRow.appendChild(th);
outletWiseTotal[element] = 0;
data.forEach(el => {
if (el.outlet == element && el.brandname !== "NA") { //taking brandname which do not have bradname===NA
outletWiseTotal[element] += parseInt(el.netamount); //here i am calculating the outletWiseTotal where transcationType==TransferIn
}
});
grandTotal += outletWiseTotal[element]; //then calculating grand total to populate it into Total column at grn entery
});
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'); //populating outletWiseTotal
console.log(outletWiseTotal[element])
td.classList.add("text-right");
headerRow.appendChild(td);
if (element.outlet == element) {
el1 = element.netAmount;
}
td = document.createElement("th");
td.innerHTML = "net amount outlet wise "; //here i want to put amount where transactionType==sales for outlet wise
td.classList.add("text-right");
headerRow.appendChild(td);
});
td = document.createElement("th");
td.innerHTML = "Total netamount"; //here sum of all outlet's netamount where transactionType==sales
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
td = document.createElement("th");
td.innerHTML = grandTotal.toLocaleString('en-IN'); //populating grand total of grnentery in Total column
td.classList.add("text-right");
headerRow.insertBefore(td, headerRow.children[1]);
thead.appendChild(headerRow);
table.appendChild(thead);
let tbody = document.createElement("tbody");
brandnames.forEach(element => {
let row = document.createElement("tr");
td = document.createElement("td");
td.innerHTML = element; //populating brandName here i am getting NA as a row which i don't want
row.appendChild(td);
let total = 0;
let totalBCount = 0;
outlets.forEach(outlet => {
let el = 0;
let bc = 0;
data.forEach(d => {
if (d.brandname == element && d.outlet == outlet) {
total += parseInt(d.netamount); //calculating total column grn entery
el = d.netamount;
bc = d.billcount;
}
});
td = document.createElement("td");
td.innerHTML = el.toLocaleString('en-IN'); //populating grnEntery for all outlet wise
td.classList.add("text-right");
row.appendChild(td);
td = document.createElement("td");
td.innerHTML = "0%";
td.classList.add("text-right");
row.appendChild(td);
});
td = document.createElement("td");
td.innerHTML = "0%";
td.classList.add("text-right");
row.insertBefore(td, row.children[1]);
td = document.createElement("td");
td.innerHTML = total.toLocaleString('en-IN'); //populating grnentery for Total column
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">
<div align="center">
<table id=ConsumptionTable>
</table>
</div>- 由于我的代码有点长，我已经评论了主要工作的重要行
- 请不要将其视为长代码，或者我已提供所有信息，如果有人有任何疑问，请与我联系
- 我被困在这里一段时间
- 任何形式的指导都会有所帮助，提前谢谢你
编辑更新 ：现在我没有选择具有品牌名称的行：“NA”，你们都可以检查片段