如何使用两个Json数据呈现HTML Table

Question

我必须根据用户要求从两个JSON数据呈现一个HTML表，我必须独立地从两个查询获取数据，所以我要获取两个JSON数据

几乎有85％的工作已经完成，只是要面对从data2记住一些值的问题

代码段

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>

在netAmount处，我要放置netAmount的data2 json，然后计算总和并将其呈现为indiuvidual sales Total =netamount of S0001+netamount of S0002

我的代码有点冗长，这就是为什么我注释所有行以了解您在哪里做什么的原因

有人在这里请帮助

Answer 1

只需在渲染表函数中传递data2数组，然后使用受尊重的出口进行过滤

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

对于个人总销量

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

以上代码是通过JS创建dom元素的。相反，我们可以根据需求组合两个不同的响应，并使用BootstrapTable插件，或者可以使用诸如把手的模板化策略，这样可以使代码清晰。