Я строю HTML-сетку, которую можно найти несколькими полями.
Мои исходные данные:
let stock = [
{ order: "200", type: "production", qty: 200, item: "IT282" },
{ order: "200", type: "production", qty: 90, item: "IT283" },
{ order: "200", type: "customer", qty: 80, item: "IT102" },
{ order: "200", type: "production", qty: 110, item: "IT283" },
{ order: "200", type: "customer", qty: 130, item: "IT102" },
{ order: "200", type: "production", qty: 45, item: "IT233" },
{ order: "200", type: "stock", qty: 30, item: "IT282" }
];
И результат, который я ищу
let result = groupBy(stock, ["order", "item"]);
[
{
field: "order",
value: "200",
rows: [
{
field: "item",
value: "IT282",
rows: [
{ order: "200", type: "production", qty: 200, item: "IT282", spans: [{ field: "order", rows: 6 }, { field: "item", rows: 2 }] },
{ order: "200", type: "stock", qty: 30, item: "IT282", spans: [{ field: "order", rows: 0 }, { field: "item", rows: 0}] },
]
},
{
field: "item",
value: "IT283",
rows: [
{ order: "200", type: "production", qty: 90, item: "IT283", spans: [{ field: "order", rows: 0 }, { field: "item", rows: 2 }] },
{ order: "200", type: "production", qty: 110, item: "IT283", spans: [{ field: "order", rows: 0 }, { field: "item", rows: 0 }] },
]
},
{
field: "item",
value: "IT102",
rows: [
{ order: "200", type: "customer", qty: 80, item: "IT102", spans: [{ field: "order", rows: 0 }, { field: "item", rows: 2 }] }, },
{ order: "200", type: "customer", qty: 130, item: "IT102", spans: [{ field: "order", rows: 0 }, { field: "item", rows: 0 }] }, }
]
},
{
field: "item",
value: "IT233",
rows: [
{ order: "200", type: "production", qty: 45, item: "IT233", spans: [{ field: "order", rows: 0 }, { field: "item", rows: 1 }] }, }
]
}
]
}
];
Вот код, который я использую для группировки своих столбцов (спасибо в следующем посте ):
let stock = [{ order: "200", type: "production", qty: 200, item: "IT282" },{ order: "200", type: "production", qty: 90, item: "IT283" },{ order: "200", type: "customer", qty: 80, item: "IT102" },{ order: "200", type: "production", qty: 110, item: "IT283" },{ order: "200", type: "customer", qty: 130, item: "IT102" },{ order: "200", type: "production", qty: 45, item: "IT233" },{ order: "200", type: "stock", qty: 30, item: "IT282" }];
groupBy = (arr, fields, parent) => {
let field = fields[0]; // one field at a time
if (!field) {
let rows = [];
let spans = [];
let up = parent;
while (up) {
spans.push(up.group.span);
up = up.group.parent;
}
arr.map(obj => {
rows.push({
...obj,
spans: spans
});
});
return rows;
}
if (!parent) parent = null;
let retArr = Object.values(
arr.reduce((obj, current) => {
let val = current.data[field];
if (!obj[val])
obj[val] = {
group: {
field: field,
value: val,
span: null,
rows: [],
parent: parent
}
};
obj[val].group.rows.push(current);
return obj;
}, {})
);
// recurse for each child's rows; if there are remaining fields
if (fields.length) {
retArr.forEach((obj, index) => {
let rows = 0;
if (!obj.group.parent) rows = obj.group.rows.length;
else rows = index === 0 ? obj.group.rows.length : 0;
obj.group.span = {
field: obj.group.field,
index: index,
count: obj.group.rows.length,
rows: rows
};
obj.group.rows = this.groupBy(obj.group.rows, fields.slice(1), obj);
});
}
return retArr;
};
let result = groupBy(stock, ["order", "item"]);
console.log(result)
Поле spans
используется для выполнения rowSpan в столбцах моей таблицы при рендеринге таблицы с использованием html. Как правильно добавить поля spans
в алгоритм выше?