我正在创建一个包含从查询中获取的数据的表,该查询以如下数组到达我：
var data = [
{id:1, land: 'FINCA1', product: "ROSA", week:25, quantity: 2000},
{id:1, land: 'FINCA2', product: "ROSA", week:25, quantity: 1900},
{id:1, land: 'FINCA3', product: "ROSA", week:25, quantity: 350},
{id:1, land: 'FINCA3', product: "ROSA1",week:25, quantity: 410},
{id:1, land: 'FINCA1', product: "ROSA", week:26, quantity: 1254},
{id:1, land: 'FINCA2' , product: "ROSA",week:26, quantity: 123},
{id:1, land: 'FINCA3' , product: "ROSA",week:26, quantity: 200}
];
以下代码显示每周每个产品的价值及其总数如下：
//I get the keys of the object to create the thead of the table and keep it in a variable
var tabla = document.createElement('table');
var tableHead = document.createElement('tr');
Object.keys(data[0]).forEach(prop=>{
if(prop != 'week' && prop != 'quantity')
tableHead.innerHTML += '<th>'+prop+'</th>';
});
var semanas = data.reduce( (semanas_, elemento)=>{
if(semanas_.indexOf(elemento.week) == -1)
semanas_.push(elemento.week)
return semanas_;
}, []);
semanas.forEach( semana=>{
tableHead.innerHTML += '<th>'+semana+'</th>';
});
var total_semanas = [];
tableHead.innerHTML += '<th>Total</th>';
tabla.appendChild(tableHead);
var tbody = document.createElement('tbody');
tabla.appendChild(tbody);
document.querySelector('body').appendChild(tabla);
var arrayOrganizado = data.reduce((arr, item)=>{
var t = total_semanas.find(e=> e.semana === item.week);
if (t) t.total += item.quantity;
else total_semanas.push({ semana : item.week, total : item.quantity });
item.week = {
numero : item.week,
cantidad : item.quantity
}
var ele = arr.find(it=>it.land === item.land && it.product === item.product);
if(ele){
ele.week.push(item.week);
ele.total = ele.week.reduce((a, b)=> a + b.cantidad, 0);
} else {
item.week = [item.week];
item.total = item.quantity;
arr.push(item);
}
return arr;
}, []);
arrayOrganizado.forEach(fila=>{
var f = Object.keys(fila).reduce( (a, b)=>{
//console.log(b);
if(b != 'week' && b != 'quantity' && b != 'total')
return a + '<td>' + fila[b] + '</td>';
return a;
}, '');
tbody.innerHTML += f + semanas.reduce( (a, _, i)=>a + '<td>' + (fila.week[i] ? fila.week[i].cantidad : 0) + '</td>', '') + '<td>' + fila.total + '</td>';
});
var f = Object.keys(arrayOrganizado[0]).reduce( (a, b)=>{
//console.log(b);
if(b != 'week' && b != 'quantity' && b != 'total')
return a + '<td> ---- </td>';
return a;
}, '');
tbody.innerHTML += f + total_semanas.reduce( (a, _, i)=>a + '<td>' + _.total + '</td>', '') + '<td>' + total_semanas.reduce( (a, b) => a.total + b.total) + '</td>';
他给我看了一张这样的桌子：
-----------------------------------------------------
Land | Product | 25 | 26 | Total |
-----------------------------------------------------
FINCA1 | ROSA | 2000 | 1254 | 3254 |
-----------------------------------------------------
FINCA2 | ROSA | 1900 | 123 | 2023 |
-----------------------------------------------------
FINCA3 | ROSA | 350 | 200 | 550 |
-----------------------------------------------------
FINCA3 | ROSA1 | 410 | 0 | 410 |
-----------------------------------------------------
TOTAL | | 4660 | 1577 | 6237 |
------------------------------------------------------
直到这里的一切都很好,问题是当周数增加时,可能有几周没有值且结果为0,但是相反将该值放在相应的一周将其放在最后,让我解释一下：
该阵列可以如下
var data = [
{id:1, land: 'FINCA1', product: "ROSA", week:25, quantity: 2000},
{id:1, land: 'FINCA2', product: "ROSA", week:25, quantity: 1900},
{id:1, land: 'FINCA3', product: "ROSA", week:25, quantity: 350},
{id:1, land: 'FINCA3', product: "ROSA1",week:25, quantity: 410},
{id:1, land: 'FINCA1', product: "ROSA", week:26, quantity: 1254},
{id:1, land: 'FINCA2' , product: "ROSA", week:26, quantity: 123},
{id:1, land: 'FINCA3' , product: "ROSA", week:26, quantity: 200},
{id:1, land: 'FINCA3' , product: "ROSA", week:24, quantity: 200}
{id:1, land: 'FINCA3' , product: "ROSA", week:23, quantity: 1200}
];
该表应如下所示：
-----------------------------------------------------------------------
Land | Product | 23 | 24 | 25 | 26 | Total |
-----------------------------------------------------------------------
FINCA1 | ROSA | 0 | 0 | 2000 | 1254 | 3254 |
-----------------------------------------------------------------------
FINCA2 | ROSA | 0 | 0 | 1900 | 123 | 2023 |
-----------------------------------------------------------------------
FINCA3 | ROSA | 1200 | 200 | 350 | 200 | 1950 |
-----------------------------------------------------------------------
FINCA3 | ROSA1 | 0 | 0 | 410 | 0 | 410 |
-----------------------------------------------------------------------
TOTAL | | 1200 | 200 | 4660 | 1577 | 7637 |
-----------------------------------------------------------------------
但是,表格如下;
-----------------------------------------------------------------------
Land | Product | 23 | 24 | 25 | 26 | Total |
-----------------------------------------------------------------------
FINCA1 | ROSA | 2000 | 1254 | 0 | 0 | 3254 |
-----------------------------------------------------------------------
FINCA2 | ROSA | 1900 | 123 | 0 | 0 | 2023 |
-----------------------------------------------------------------------
FINCA3 | ROSA | 1200 | 200 | 350 | 200 | 1950 |
-----------------------------------------------------------------------
FINCA3 | ROSA1 | 410 | 0 | 0 | 0 | 410 |
-----------------------------------------------------------------------
TOTAL | | 1200 | 200 | 4660 | 1577 | 7637 |
-----------------------------------------------------------------------
我认为函数reduce()在这部分中产生了问题：
tbody.innerHTML += f + semanas.reduce( (a, _, i)=>a + '<td>' + (fila.week[i] ? fila.week[i].cantidad : 0) + '</td>', '') + '<td>' + fila.total + '</td>';
我不知道是否还有其他相似的功能,或者这个功能.
最佳答案 我建议先计算总和,然后将结果存储在两个对象中,一个用于周部分,一个用于分组项目.
稍后您可以使用这些值来构建数组并直接访问值.
var data = [{ id: 1, land: 'FINCA1', product: "ROSA", week: 25, quantity: 2000 }, { id: 1, land: 'FINCA2', product: "ROSA", week: 25, quantity: 1900 }, { id: 1, land: 'FINCA3', product: "ROSA", week: 25, quantity: 350 }, { id: 1, land: 'FINCA3', product: "ROSA1", week: 25, quantity: 410 }, { id: 1, land: 'FINCA1', product: "ROSA", week: 26, quantity: 1254 }, { id: 1, land: 'FINCA2', product: "ROSA", week: 26, quantity: 123 }, { id: 1, land: 'FINCA3', product: "ROSA", week: 26, quantity: 200 }, { id: 1, land: 'FINCA3', product: "ROSA", week: 24, quantity: 200 }, { id: 1, land: 'FINCA3', product: "ROSA", week: 23, quantity: 1200 }],
weeks = {},
weekKeys,
groups = {},
cols = ['Land', 'Product'],
table = document.createElement('table'),
tr, th, td;
data.forEach(function (a) {
groups[a.land] = groups[a.land] || {};
groups[a.land][a.product] = groups[a.land][a.product] || {};
groups[a.land][a.product][a.week] = (groups[a.land][a.product][a.week] || 0) + a.quantity;
groups[a.land][a.product].total = (groups[a.land][a.product].total || 0) + a.quantity;
weeks[a.week] = (weeks[a.week] || 0) + a.quantity;
});
weekKeys = Object.keys(weeks).map(Number).sort(function (a,b) { return a - b; });
cols = cols.concat(weekKeys, 'Total');
tr = document.createElement('tr');
cols.forEach(function (a) {
var th = document.createElement('th');
th.innerText = a;
tr.appendChild(th);
});
table.appendChild(tr);
Object.keys(groups).forEach(function (land) {
Object.keys(groups[land]).forEach(function (product) {
var tr = document.createElement('tr');
cols.forEach(function (a, i) {
var td = document.createElement('td');
if (i > 1) { td.style.textAlign = 'right'; }
td.innerText = [land, product][i] ||
((groups[land] || {})[product] || {})[(a).toString().toLowerCase()] ||
0;
tr.appendChild(td);
});
table.appendChild(tr);
});
});
weeks.total = 0;
tr = document.createElement('tr');
cols.forEach(function (a, i) {
var td = document.createElement('td'),
value = weeks[(a).toString().toLowerCase()] || 0;
if (i > 1) { td.style.textAlign = 'right'; }
td.innerText = ['Total', ' '][i] || value;
tr.appendChild(td);
if (a !== 'Total') { weeks.total += value; }
});
table.appendChild(tr);
document.body.appendChild(table);