Arrays 在TypeScript中格式化数据库中的数据

我在Angular类上编写以下方法时遇到问题。我不知道如何将

arrayId

中的值添加到

系列

对象中的

数据

数组中

getChartOptions() {

    const arrayId=[];
    const arrayTimestamp=[];
    const arrayData=[];
    const arrayData2=[];
    var i=0;

    this.httpClient.get<any>('http://prod.kaisens.fr:811/api/sleep/?deviceid=93debd97-6564-454b-be33-35bd377a2563&startdate=1612310400000&enddate=1614729600000').subscribe(
      reponse => {
        this.sleeps = reponse;
        this.sleeps.forEach(element => { arrayId.push(this.sleeps[i]._id),arrayTimestamp.push(this.sleeps[i].timestamp),arrayData.push(this.sleeps[i].data[18]),arrayData2.push(this.sleeps[i].data[39])
          i++;
        });
         console.log(arrayId);
         console.log(arrayTimestamp);
         console.log(arrayData);
         console.log(arrayData2);
      }
    )
    return {
      series: [{
        name: 'Id',
        data: [35, 65, 75, 55, 45, 60, 55]
      }]
   }
}

getChartOptions（）{
常数arrayId=[]；
常量arrayTimestamp=[]；
常数arrayData=[]；
常数arrayData2=[]；
var i=0；
this.httpClient.get（'http://prod.kaisens.fr:811/api/sleep/?deviceid=93debd97-6564-454b-be33-35bd377a2563&startdate=1612310400000&enddate=1614729600000'）。订阅(
回复=>{
这个。睡眠=反应；
this.sleeps.forEach（element=>{arrayId.push（this.sleeps[i].\u id），arrayTimestamp.push（this.sleeps[i].timestamp），arrayData.push（this.sleeps[i].data[18]），arrayData2.push（this.sleeps[i].data[39]）
i++；
});
控制台日志（arrayId）；
控制台日志（arrayTimestamp）；
console.log（arrayData）；
console.log（arrayData2）；
}
)
返回{
系列：[{
名称：“Id”，
数据：[35,65,75,55,45,60,55]
}]
}
}

只需遵循以下代码：

series: [{
name: 'Id',
data: arrayId
}]

---

我有两条主要的建议给你：

了解您正在处理的数据的类型

熟悉各种各样的知识

get（）

不是有用的类型。如果您了解响应是什么，那么Typescript可以帮助确保您正确处理它

我签出了URL，它看起来像是一个对象数组，如下所示：

{
    "_id": 4,
    "device_id": "93debd97-6564-454b-be33-35bd377a2563",
    "timestamp": 1612310400000.0,
    "data": "{'sleep_quality': 1, 'sleep_duration': 9}"
},

该

数据

属性未正确编码为对象或可解析的JSON字符串。如果您控制这个后端，那么您将需要修复它

起初我认为代码中的

数据[18]

和

数据[39]

是错误的。现在我看到它试图从这个格式错误的数据中提取值。如果这些数字可以是10或更多，则通过索引访问将不起作用

您现在拥有的类型是：

interface DataPoint {
    _id: number;
    device_id: string;
    timestamp: number;
    data: string;
}

您想要的类型是：

interface DataPoint {
    _id: number;
    device_id: string;
    timestamp: number;
    data: {
        sleep_quality: number;
        sleep_duration: number;
    }
}

您可以将请求键入

this.httpClient.get（

），现在您将获得数据的自动完成

---

看起来您试图做的基本上是将它从一个行数组转换为每个列的单独数组

您不需要变量

i

，因为

.forEach

循环处理迭代。回调中的

元素

变量就是您想要的行

this.sleeps.forEach(element => { 
    arrayId.push(element._id);
    arrayTimestamp.push(element.timestamp);
    arrayData.push(element.data[18]);
    arrayData2.push(element.data[39]);
});

您现在使用的

.forEach

循环是有效的，因为它只在数组中循环一次。每个列的

.map

在技术上效率较低，因为我们必须分别在每个列中循环，但我认为这可能会使代码更易于阅读和理解。它还允许Typescript推断类型而对于空数组，您需要像

const arrayId:number[]=[]；

那样对其进行注释

const mapData = (response: DataPoint[]) => {
    return [{
        name: 'Id',
        data: response.map(element => element._id)
    }, {
        name: 'Timestamp',
        data: response.map(element => element.timestamp)
    }, {
        name: 'Sleep Quality',
        data: response.map(element => parseInt(element.data[18])) // fix this
    }, {
        name: 'Sleep Duration',
        data: response.map(element => parseInt(element.data[39])) // fix this
    }]
}

HTTP请求是异步的。如果您在

subscribe

回调之外访问数组，那么它们仍然是空的。我不是一个有棱角的人，所以我不确定这一部分，但我认为您希望更新类的属性，而不是返回值