Javascript 如何使用JSON数据创建动态表？

我有一个HTML表，我在JSON数据的帮助下制作，我只在javascript的帮助下创建我的表，我的表是动态的

我有一个json数组，里面有几个包含数据的对象

从这个JSON，我试图创建一个HTML表

• 我已经成功地创建了标题，但在创建主体部分时遇到了问题
• 我正在尝试创建这种表：

• 平均值就像所有已取消票据的总和除以门店数量，这就是我计算门店长度并将其存储在全局变量中的原因

• 由于我的代码有点长，我已经对我所有的行进行了注释，我在哪里做什么，在哪里面临什么问题
• 在主体部分内，我不知道如何填充有关出口的已取消票据数据，以及重复票据的数据

这就是我到目前为止所做的：

var outletCount=0//用于获取出口数量的全局变量
风险值数据=[{
“出口”：“JAYANAGAR”，
“已取消”：126544，
“重复”：1
},
{
“出口”：“MALLESHWARAM”，
“已取消”：31826，
“重复”：31
},
{
“出口”：“科拉尔”，
“已取消”：10374，
“重复”：10
}
];
让formatData=function（data）{//outlets是唯一的，这就是为什么在我的代码中将其格式化为向前循环的原因
让出口=[]；
data.forEach（元素=>{
if（出口指数）（元件出口）=-1）{
插座。推动（元件。插座）；
}
});
outletCount=outlets.length//计算出口计数
返回{
数据：数据，
出口：出口，
};
};
让renderTable=函数（数据）{
出口=数据出口；
data=data.data；
设tbl=document.getElementById（“tblOlSalesSummary”）；
让table=document.createElement（“table”）；
设thead=document.createElement（“thead”）；
让headerRow=document.createElement（“tr”）；
设th=document.createElement（“th”）；
th.innerHTML=“票据类型”；//表头
添加（“文本中心”）；
头颅附属器（th）；
th=document.createElement（“th”）；
th.innerHTML=“平均”；//标题
添加（“文本中心”）；
头颅附属器（th）；
outlets.forEach（元素=>{
th=document.createElement（“th”）；
th.innerHTML=element；//这一个正在将outlet填充为标头
添加（“文本中心”）；
头颅附属器（th）；
});
附肢儿童（头颅）；
表1.儿童（thead）；
让tbody=document.createElement（“tbody”）；//从这里开始，我不知道该怎么做
让row=document.createElement（“tr”）；
设total=0；
outlets.forEach（outlets=>{//我试图通过outlets循环，但得到了一些其他东西
设el=0；
data.forEach（d=>{
如果（d.出口==出口）{
总计+=已解析整数（d.已取消）；
el=d.取消；
}
});
td=document.createElement（“td”）；
td.innerHTML=el.tolocalString（'en-in'）；
td.classList.add（“文本右侧”）；
世界其他地区（td）；
});
/*log（“行为：”，row.children）*/
tbody.appendChild（世界其他地区）；
表3.儿童（t身体）；
tbl.innerHTML=“”；
tbl.附件（表）；
表.classList.add（“表”）；
table.classList.add（“带条纹的表”）；
table.classList.add（“带边框的表”）；
table.classList.add（“表悬停”）；
}
设FormattedData=FormattData（数据）；
可渲染（格式化数据）
使用可以从json创建表的库

例如：



var t={''：'div'，'html':'${title}${year}}；
变量d=[
{“标题”：“热量”，“年份”：“1995”}，
{“标题”：“抢夺”，“年份”：“2000”}，
{“标题”：“上升”，“年份”：“2009”}，
{“标题”：“不可原谅”，“年份”：“1992”}，
{“标题”：“Amadeus”，“年份”：“1984”}
];
write（json2html.transform（d，t））；

我已经在这里写了代码。看一看。它使用JQuery

HTML:

<table id="dataTable">

</table>

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



JavaScript:

<table id="dataTable">

</table>

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

var数据=[{
“出口”：“JAYANAGAR”，
“已取消”：126544，
“重复”：1
},
{
“出口”：“MALLESHWARAM”，
“已取消”：31826，
“重复”：31
},
{
“出口”：“科拉尔”，
“已取消”：10374，
“重复”：10
}
];
函数绘图（）{
var avgCancelled=0；
var avgDuplicate=0；
var totalCancelled=0；
var totalDuplicate=0；
对于（变量i=0；i
在您的表中有两个静态字段列
billtype
和
average
，在循环json数据之前需要追加它们


var outletCount=0//用于获取出口数量的全局变量
风险值数据=[{
“出口”：“JAYANAGAR”，
“已取消”：126544，
“重复”：1
},
{
“出口”：“MALLESHWARAM”，
“已取消”：31826，
“重复”：31
},
{
“出口”