У меня есть HTML-таблица, которую я создаю с помощью данных JSON, я создаю свою таблицу только с помощью 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>
Я не получаю смысла зацикливать свой отмененный счет и дублировать счет относительно торговых точек, а затем вычислять среднее значение.