HTML表格数据未按正确顺序填充

时间：2019-03-14 08:33:41

标签： javascript html-table

我有一个来自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的两个对象，就像它们的状态一样
  • 这是我要制作的this表的类型
  • 我在JSON中有多个数据作为对象，其中brandcode and brandname as NA和transactionType为sales，所以当发生这种情况时，我想在当前的销售地点列显示净额硬编码为net amount outlet wise
  • 有些时候它会以其他方式提供数据，我必须像我的图像中那样放置0，我的插座S0010没有任何销售，所以必须显示0
  • 与出口transactionType==sales的{​​{1}}相同，我必须显示grnEntery列为S0010 Grn entery只不过等于0

我的代码 

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

  • 由于我的代码有点冗长，所以我评论了正在做主要工作的重要几行
  • 请不要将其视为长代码，否则我已提供了所有信息，如果有人有任何疑问，请与我联系
  • 有一段时间我被困在这里
  • 任何一种指导都会有所帮助，谢谢您

编辑更新：现在，我不参加品牌名称为“ NA”的行，大家都可以检查代码段

1 个答案:

答案 0 :(得分：0)

我自己完成了此操作，因此我发布了答案，以防将来有人遇到类似问题

  • 我已经在所有行中评论了我在哪里做什么

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 \u0026 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": 2019990
}, {
  "outlet": "S00011",
  "brandcode": "NA",
  "brandname": "NA",
  "transactionType": "Sales",
  "netamount": 100
}, {
  "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 \u0026 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": 394016
}, {
  "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 \u0026 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": 482861
}, {
  "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,
  };
};
var totalSalesPercentage = '';
var olWiseSalesPercentage = '';
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

      }
      if (el.outlet == element && el.brandname == "NA" && el.transactionType == "Sales") { //taking brandname which do not have bradname==NA
        outletWiseNetamount[element] = parseInt(el.netamount) || 0 //outlet wise netamount where transactiontype=="sales"


      }

    });
    grandTotal += outletWiseTotal[element]; //then calculating grand total to populate it into  Total column at grn entery

    grandNetAmount += outletWiseNetamount[element] || 0 //calculating grandTotal top put in Total column

  });

  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 olwise netamount where transcation type=="Sales"
    td.classList.add("text-right");
    headerRow.appendChild(td);
    if (element.outlet == element) {
      el1 = element.netAmount;
    }
    td = document.createElement("th");
    td.innerHTML = outletWiseNetamount[element] || 0; //population sum of netamount ol wise in total column
    td.classList.add("text-right");
    headerRow.appendChild(td);

  });
  td = document.createElement("th");
  td.innerHTML = grandNetAmount;
  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");
  brandnames.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.brandname == element && d.outlet == outlet) {
          total += parseInt(d.netamount);
          el = d.netamount;
        }
      });

      olWiseSalesPercentage = (el / outletWiseTotal[outlet]) * 100 || 0
      td = document.createElement("td");
      td.innerHTML = el.toLocaleString('en-IN');

      td.classList.add("text-right");
      row.appendChild(td);
      td = document.createElement("td");
      td.innerHTML = olWiseSalesPercentage.toFixed(2) + "%";

      td.classList.add("text-right");
      row.appendChild(td);
    });
    totalSalesPercentage = (total / grandTotal) * 100
    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">
<div align="center">
  <table id=ConsumptionTable>
  </table>
</div>

相关问题
最新问题