在angular7中对打字稿中的字母数字数组进行排序

Question

我必须在这里解决 2 个问题。

1. 我需要绘制一个包含 20 个数据点的条形图。数据点来自后端 API。但 API 可能不会每次都返回全部 20 个点（数据不可用）。它可以返回 7、0、1 或 20 个数据点。但在 UI 中，我们必须确保绘制了 20 个 X 轴点。对于 API 中缺失的数据点，我们必须在 Y 轴上显示 0。

2. 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
      })
    });
  }

如何将缺失的数据点添加到数组中并排序？

Answer 1

通过创建一个您想要大小的新数组，您可以映射这些值，找到您想要的 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。

Answer 2

一种方法可能是在您获得新数据时进行更新，

public formatChartData(chartData){
    let self = this;
    _.each(chartData, function (d) {
      let level = number(d.levelName.replace('level', ''));
      self.finalChartData[level - 1].y = d.participantsCount;
    });
}

如果您需要重置新数据，您只需遍历数组并分配 0（或任何值）。

要初始化数组，您只需要一个简单的 for，

for (let i = 1; i <= 20; i++) {
  self.finalChartData[i] = {
    x: 'level ' + i,
    y: 0
  };
}