javascript - 在angular7中对打字稿中的字母数字数组进行排序
问题描述
我必须在这里解决两个问题。
我需要绘制一个包含 20 个数据点的条形图。数据点来自后端 API。但 API 可能不会每次都返回全部 20 个点(数据不可用)。它可以返回 7、0、1 或 20 个数据点。但在 UI 中,我们必须确保绘制了 20 个 X 轴点。对于 API 中缺失的数据点,我们必须在 Y 轴上显示 0。
X 轴点是字母数字。在将它们绘制到 UI 中之前,我们需要在 typescript 中按升序对它们进行排序。
例如:
这就是我们从后端 API 接收数据的方式。
0: {levelName: "level7", participantsCount: 42}
1: {levelName: "level1", participantsCount: 13}
2: {levelName: "level11", participantsCount: 62}
3: {levelName: "level3", participantsCount: 73}
在打字稿方面,我们需要如下操作和构建它。
0: {levelName: "Level 1", participantsCount: 13}
1: {levelName: "Level 2", participantsCount: 0}
2: {levelName: "Level 3", participantsCount: 73}
3: {levelName: "Level 4", participantsCount: 0}
4: {levelName: "Level 5", participantsCount: 0}
5: {levelName: "Level 6", participantsCount: 0}
6: {levelName: "Level 7", participantsCount: 42}
7: {levelName: "Level 8", participantsCount: 0}
8: {levelName: "Level 9", participantsCount: 0}
9: {levelName: "Level 10", participantsCount: 0}
10: {levelName: "Level 11", participantsCount: 62}
11: {levelName: "Level 12", participantsCount: 0}
12: {levelName: "Level 13", participantsCount: 0}
13: {levelName: "Level 14", participantsCount: 0}
14: {levelName: "Level 15", participantsCount: 0}
15: {levelName: "Level 16", participantsCount: 0}
16: {levelName: "Level 17", participantsCount: 0}
17: {levelName: "Level 18", participantsCount: 0}
18: {levelName: "Level 19", participantsCount: 0}
19: {levelName: "Level 20", participantsCount: 0}
到目前为止,我已经编写了这段代码
public formatChartData(chartData){
let self = this;
_.each(chartData, function (d) {
let levelNameSplit = d.levelName.split(/([0-9]+)/)
let levelName = (levelNameSplit[0].charAt(0).toUpperCase() + levelNameSplit[0].slice(1) + " " + levelNameSplit[1])
self.finalChartData.push({
x:levelName,
y:d.participantsCount
})
});
}
如何将缺失的数据点添加到数组中并对其进行排序?
解决方案
通过创建一个您想要的大小的新数组,您可以映射这些值,找到您想要的 Api 数据并返回该 x 值处的数据点。
const apiData = [
{levelName: "level7", participantsCount: 42},
{levelName: "level1", participantsCount: 13},
{levelName: "level11", participantsCount: 62},
{levelName: "level3", participantsCount: 73}
];
const result = new Array(20).fill({}).map((_, i) => {
const levelNum = i + 1;
const level = apiData.find(d => d.levelName === `level${levelNum}`) || {};
return {
levelName: `Level ${levelNum}`,
participantsCount: level.participantsCount || 0
}
});
console.log(result);
这段代码效率有点低,因此您可以通过循环 api 数据并将其添加到以 levelName 为键的对象来改进它。然后,您只需在循环中键入关卡名称,而不是执行find
.
推荐阅读
- python - 如何使用 Python 读取大型 Firestore 集合而不会遇到 503 超时错误
- r - 用 R 理解 qqplots 中的样本量
- mysql - 从前端传递参数后查询不显示结果?
- flutter - 启动应用程序时出现白屏(本地化功能)
- sql - 有没有办法选择性地将数据导入 Oracle SQL Developer
- html - 如何在html中链接图像
- javascript - Azure 管道抛出“Chrome 无法启动:崩溃”。npm 测试脚本命令出错
- javascript - 如何加载基于浏览器语言的网页模板?
- terraform - 带范围的 Terraform 循环
- python - Plotly 时间线可以在 Jupyter Notebook Widget 中使用/复制吗?