如何使用JSON數據創建動態表？

Question

我有一個借助JSON數據制作的HTML表，我僅借助javascript創建表，並且該表是動態的

我有一個json數組，其中有幾個包含數據的對象。

從這個JSON，我試圖做一個HTML表

• 我已經成功創建了標題，但是在創建正文部分時遇到了問題

• 我正在嘗試創建這種表：

  

• 平均值就像所有已取消票據的總和除以網點數量，這就是為什么我要計算網點的長度並將其存儲在全局變量中的原因

• 由於我的代碼太長，我已經在所有行中注釋了我在做什么，在哪里遇到了什么問題。
• 在主體部分內部，我不知道如何針對出口對已取消的賬單數據進行填充，對於重復的賬單也是如此

這是我到目前為止所做的：

 var outletCount = 0; //global variable to get the no of outlets var data = [{ "outlet": "JAYANAGAR", "cancelled": 126544, "duplicate": 1 }, { "outlet": "MALLESHWARAM", "cancelled": 31826, "duplicate": 31 }, { "outlet": "KOLAR", "cancelled": 10374, "duplicate": 10 } ]; let formatData = function(data) { //outlets is unique thats why formating it to loop forward in my code let outlets = []; data.forEach(element => { if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); outletCount = outlets.length //calculating outlet count return { data: data, outlets: outlets, }; }; let renderTable = function(data) { outlets = data.outlets; data = data.data; let tbl = document.getElementById("tblOlSalesSummary"); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "Bill Type"; //header th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Average"; //header th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.innerHTML = element; //this one is populating outlet as header th.classList.add("text-center"); headerRow.appendChild(th); }); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); // from here onwards i don't know what to do let row = document.createElement("tr"); let total = 0; outlets.forEach(outlet => { //i am trying to loop through outlets but getting somthing else let el = 0; data.forEach(d => { if (d.outlet == outlet) { total += parseInt(d.cancelled); el = d.cancelled; } }); td = document.createElement("td"); td.innerHTML = el.toLocaleString('en-in'); td.classList.add("text-right"); row.appendChild(td); }); /* console.log("row is : " , row.children ) */ 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" class="table table-responsive"> <table id="tblOlSalesSummary"></table> </div> 

我不是要循環流通我已取消的賬單和關於網點的重復賬單，然后計算平均值。

Answer 1

我已經在此JSFiddle中編寫了代碼。 看一看。 它使用JQuery。

HTML：

<table id="dataTable">

</table>

JavaScript的：

var data = [{
    "outlet": "JAYANAGAR",
    "cancelled": 126544,
    "duplicate": 1
  },
  {
    "outlet": "MALLESHWARAM",
    "cancelled": 31826,
    "duplicate": 31
  },
  {
    "outlet": "KOLAR",
    "cancelled": 10374,
    "duplicate": 10
  }
];


function draw() {
    var avgCancelled = 0;
    var avgDuplicate = 0;
    var totalCancelled = 0;
    var totalDuplicate = 0;
    for (var i = 0; i < data.length; i++) {
        totalCancelled += data[i].cancelled;
        totalDuplicate += data[i].duplicate;
    }
    avgCancelled = totalCancelled / data.length;
    avgDuplicate = totalDuplicate / data.length;
    drawTableHead()
    drawTableRows(avgCancelled, avgDuplicate)
}

function drawTableHead() {
    var row = $("<tr />");
    $("#dataTable").append(row);
    row.append("<th>" + "BILLTYPE"  + "</th>")
    row.append("<th>" + "AVERAGE"  + "</th>")
    for (var i = 0; i < data.length; i++) {
        row.append("<th>" + data[i].outlet  + "</th>")
    }
}

function drawTableRows(avgCancelled, avgDuplicate) {
    var firstRow = $("<tr />");
    $("#dataTable").append(firstRow);
    firstRow.append("<td>" + "CANCELLED BILL"  + "</td>")
    firstRow.append("<td>" + avgCancelled  + "</td>")
    for (var i = 0; i < data.length; i++) {
        firstRow.append("<td>" + data[i].cancelled  + "</td>")
    }
    var secondRow = $("<tr />");
    $("#dataTable").append(secondRow);
    secondRow.append("<td>" + "DUPLICATE BILL"  + "</td>")
    secondRow.append("<td>" + avgDuplicate  + "</td>")
    for (var i = 0; i < data.length; i++) {
        secondRow.append("<td>" + data[i].duplicate  + "</td>")
    }
}


draw();

Answer 2

表格的billtype和average有兩個靜態字段列，需要在循環json數據之前附加它們

  var outletCount = 0; //global variable to get the no of outlets var data = [{ "outlet": "JAYANAGAR", "cancelled": 126544, "duplicate": 1 }, { "outlet": "MALLESHWARAM", "cancelled": 31826, "duplicate": 31 }, { "outlet": "KOLAR", "cancelled": 10374, "duplicate": 10 }, { "outlet": "New Test", "cancelled": 154, "duplicate": 20 } ]; let formatData = function(data) { //outlets is unique thats why formating it to loop forward in my code let outlets = []; data.forEach(element => { if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); outletCount = outlets.length //calculating outlet count return { data: data, outlets: outlets, }; }; let renderTable = function(data) { outlets = data.outlets; data = data.data; let tbl = document.getElementById("tblOlSalesSummary"); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "Bill Type"; //header th.classList.add("text-center"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Average"; //header th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.innerHTML = element; //this one is populating outlet as header th.classList.add("text-center"); headerRow.appendChild(th); }); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); // from here onwards i don't know what to do let row = document.createElement("tr"); let total = 0; // static field insertion for Cancelled bill let el = 'Cancelled bill'; td = document.createElement("td"); td.innerHTML = el.toLocaleString('en-in'); td.classList.add("text-right"); row.appendChild(td); // Logic start to find the average cancelled amount var total_cancel =0; total_can_count = 0; outlets.forEach(outlet => { data.forEach(d => { if (d.outlet == outlet) { total_cancel += parseInt(d.cancelled); total_can_count++; } }); }); let el_avg = ( total_cancel / (total_can_count) ); td = document.createElement("td"); td.innerHTML = el_avg.toLocaleString('en-in'); td.classList.add("text-right"); row.appendChild(td); // Logic End to find the average cancelled amount outlets.forEach(outlet => { let el = 0; data.forEach(d => { if (d.outlet == outlet) { total += parseInt(d.cancelled); el = d.cancelled; } }); td = document.createElement("td"); td.innerHTML = el.toLocaleString('en-in'); td.classList.add("text-right"); row.appendChild(td); }); /* console.log("row is : " , row.children ) */ tbody.appendChild(row); let row_duplicate = document.createElement("tr"); let total_dup = 0; // static field insertion for duplicate bill let el_2 = 'Duplicate bill'; td = document.createElement("td"); td.innerHTML = el_2.toLocaleString('en-in'); td.classList.add("text-right"); row_duplicate.appendChild(td); // Logic start to find the Duplicate average total_dup_count = 0; outlets.forEach(outlet => { data.forEach(d => { if (d.outlet == outlet) { total_dup += parseInt(d.duplicate); total_dup_count++; } }); }); let el_avg_2 = ( total_dup / (total_dup_count) ); td = document.createElement("td"); td.innerHTML = el_avg_2.toLocaleString('en-in'); td.classList.add("text-right"); row_duplicate.appendChild(td); // Logic End to find the Duplicate average outlets.forEach(outlet => { //i am trying to loop through outlets but getting somthing else let el = 0; data.forEach(d => { if (d.outlet == outlet) { total += parseInt(d.duplicate); el = d.duplicate; } }); td = document.createElement("td"); td.innerHTML = el.toLocaleString('en-in'); td.classList.add("text-right"); row_duplicate.appendChild(td); }); /* console.log("row is : " , row.children ) */ tbody.appendChild(row); tbody.appendChild(row_duplicate); 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" class="table table-responsive"> <table id="tblOlSalesSummary"></table> </div> 

Answer 3

使用可以從json創建表的庫。

例：

https://json2html.com/

 <script> var t = {'<>':'div','html':'${title} ${year}'}; var d = [ {"title":"Heat","year":"1995"}, {"title":"Snatch","year":"2000"}, {"title":"Up","year":"2009"}, {"title":"Unforgiven","year":"1992"}, {"title":"Amadeus","year":"1984"} ]; document.write( json2html.transform(d,t) ); </script>