我已经创建了一个具有每周计数和每月计数的表并创建了表。我想计算总数并将其显示在逐年列中。感到震惊的是,每年需要总计显示2,1、3、2、1、3
print
const response=[{"UserName":"user1","month":"May","Type":"Type3","Week1":2,"Week3":3},
{"UserName":"user2","month":"May","Type":"Type3","Week1":2},
{"UserName":"user1","month":"May","Type":"Type1","Week2":1},
{"UserName":"user2","month":"May","Type":"Type1","Week2":1,},
{"UserName":"user1","month":"Jun","Type":"Type1","Week2":1},
{"UserName":"user2","month":"Jun","Type":"Type1","Week2":1},
{"UserName":"user1","month":"Jun","Type":"Type2","Week1":1},
{"UserName":"user2","month":"Jun","Type":"Type2","Week1":1},
{"UserName":"user1","month":"Jul","Type":"Type2","Week3":1},
{"UserName":"user1","month":"Jul","Type":"Type2","Week1":1},
];
const weeksByMonth = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
.map(m => {
const byMonth = response.filter(x => x.month.substring(0, 3) == m);
if (byMonth.length)
return {
month: m,
weeks: [1, 2, 3, 4, 5].filter(w =>
byMonth.find(x => "Week" + w in x)
)
};
})
.filter(m => m);
const monthWeeks = weeksByMonth.reduce(
(w, m) => w.concat(m.weeks.map(w => "Week" + w).concat("Total")),
[]
);
const users = response.reduce((u, x) => {
if (!(x.UserName in u)) u[x.UserName] = {};
const user = u[x.UserName];
if (!(x.Type in user)) user[x.Type] = {};
const { UserName, Type, month, ...weeks } = x;
user[x.Type][x.month.substring(0, 3)] = weeks;
return u;
}, {});
$("#geo_summary thead")
.find("tr")
.append($("<td>"))
.append($("<td>"))
.append(
weeksByMonth.map(m =>
$("<td>")
.text(m.month)
.attr("colspan", m.weeks.length + 1)
.css("text-align", "center")
)
)
.after(
$("<tr>")
.append($("<td>").text(Object.keys(users)[0]))
.append($("<td>").text('Yearly'))
.append(monthWeeks.map(w => $("<td>").text(w)))
);
$("#geo_summary tbody").append(
Object.keys(users).reduce((r, u, i) => {
if (i)
r.push(
$("<tr>")
.append($("<td>").text(u))
.append(new Array(monthWeeks.length).map(n => $("<td>")))
);
const types = users[u];
return r.concat(
Object.keys(types)
.sort()
.map(t =>
$("<tr>")
.append($("<td>").text(t))
.append($("<td>").text('total+total')) //
.append(
weeksByMonth
.reduce((w, m) => {
const month = types[t][m.month] || {};
return w.concat(
m.weeks
.map(w => month["Week" + w])
.concat(
Object.keys(month).reduce(
(t, w) => t + month[w],
0
) || "0"
)
);
}, [])
.map(t => $("<td>").text(t))
)
)
);
}, [])
);
table{border-collapse:collapse}td{border:1px solid #000;padding:.5em}.as-console-wrapper { max-height: 100% !important; top: 0; }
答案 0 :(得分:1)
const response = [
{"UserName": "user1", "month": "May", "Type": "Type3", "Week1": 2, "Week3": 3},
{"UserName": "user2", "month": "May", "Type": "Type3", "Week1": 2},
{"UserName": "user1", "month": "May", "Type": "Type1", "Week2": 1},
{"UserName": "user2", "month": "May", "Type": "Type1", "Week2": 1},
{"UserName": "user1", "month": "Jun", "Type": "Type1", "Week2": 1},
{"UserName": "user2", "month": "Jun", "Type": "Type1", "Week2": 1},
{"UserName": "user1", "month": "Jun", "Type": "Type2", "Week1": 1},
{"UserName": "user2", "month": "Jun", "Type": "Type2", "Week1": 1},
{"UserName": "user1", "month": "Jul", "Type": "Type2", "Week3": 1},
{"UserName": "user1", "month": "Jul", "Type": "Type2", "Week1": 1},
];
const weeksByMonth = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"].map(m => {
const byMonth = response.filter(x => x.month.substring(0, 3) == m);
if (byMonth.length)
return {
month: m,
weeks: [1, 2, 3, 4, 5].filter(w => byMonth.find(x => "Week" + w in x))
};
}).filter(m => m);
const monthWeeks = weeksByMonth.reduce((w, m) => w.concat(m.weeks.map(w => "Week" + w).concat("Total")), []);
const users = response.reduce((u, x) => {
if (!(x.UserName in u))
u[x.UserName] = {};
const user = u[x.UserName];
if (!(x.Type in user))
user[x.Type] = {};
const {UserName, Type, month, ...weeks} = x;
user[x.Type][x.month.substring(0, 3)] = weeks;
return u;
}, {});
$("#geo_summary thead").find("tr")
.append($("<td>"))
.append($("<td>"))
.append(weeksByMonth.map(m => $("<td>").text(m.month).attr("colspan", m.weeks.length + 1).css("text-align", "center")))
.after($("<tr>")
.append($("<td>").text(Object.keys(users)[0]))
.append($("<td>").text("Yearly"))
.append(monthWeeks.map(w => $("<td>").text(w))));
$("#geo_summary tbody").append(
Object.keys(users).reduce((r, u, i) => {
if(i)
r.push($("<tr>")
.append($("<td>").text(u))
.append(monthWeeks.map(w => $("<td>")))
);
const types = users[u];
return r.concat(Object.keys(types).sort().map(t => $("<tr>")
.append($("<td>").text(t))
.append($("<td>").text(Object.keys(types[t])
.reduce((y, m) => y + Object.keys(types[t][m] || {})
.reduce((y, w) => y + types[t][m][w], 0), 0)))
.append(weeksByMonth
.reduce((w, m) => {
const month = types[t][m.month] || {};
return w.concat(m.weeks.map(w => month["Week" + w] || 0)
.concat(Object.keys(month).reduce((t, w) => t + month[w], 0)));
}, [])
.map(t => $("<td>").text(t))
)
));
}, [])
);
table{border-collapse:collapse}td{border:1px solid #000;padding:.5em}.as-console-wrapper { max-height: 100% !important; top: 0; }
<table id="geo_summary" class="basic-table"><thead><tr></tr></thead><tbody></tbody></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>