Question

我有两组JSON数据，分别是data和data2

从我已填充表的数据中获取数据，但从data2中我要填充netAmount所面临的问题

我在出口处有netamount列，其名称为sales，在Total列中有一个netamount列，其名称也为sales as header
我只想在硬编码字符串的位置填充netAmount的值

代码

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) {
  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">
<div align="center">
  <table id=BillCountTable>
  </table>

我评论了我正在做的所有事情，以认识大家

在出口netamount的{{1}}处，我想将S0001放在data2中
在出口587714的{{1}}处，我想将netAmount放在data2中
以及S0002中的两个netAmount的总和

我被困在这里很长时间，请帮帮我请不要说您的代码很冗长，只是指导我如何使用data2对象，它们是netAmount和代码中的插座，然后可以在我的代码中使用它们

[ This one is the expected output i am trying to achieve[1]

如何用不同的json数据制作HTML表

0 个答案: