如何将响应对象的字段映射到 angular 中的新数组?
How to Map fields of the response object to new arrays in angular?
我想将来自服务的响应映射到不同的数组。我的回复类型为
{
"success": true,
"dataPoints": [{
"count_id": 4,
"avg_temperature": 2817,
"startTime": "00:00:00",
"endTime": "00:19:59.999"
}, {
"count_id": 4,
"avg_temperature": 2814,
"startTime": "00:59:59.997",
"endTime": "01:19:59.996"
}, {
"count_id": 4,
"avg_temperature": 2816,
"startTime": "00:39:59.998",
"endTime": "00:59:59.997"
}, {
"count_id": 4,
"avg_temperature": 2825,
"startTime": "02:19:59.993",
"endTime": "02:39:59.992"
}, {
"count_id": 4,
"avg_temperature": 2828,
"startTime": "02:39:59.992",
"endTime": "02:59:59.991"
}, {
"count_id": 4,
"avg_temperature": 2832,
"startTime": "02:59:59.991",
"endTime": "03:19:59.99"
}, {
"count_id": 4,
"avg_temperature": 2841,
"startTime": "03:39:59.989",
"endTime": "03:59:59.988"
}, {
"count_id": 4,
"avg_temperature": 2816,
"startTime": "01:39:59.995",
"endTime": "01:59:59.994"
}, {
"count_id": 5,
"avg_temperature": 2668,
"startTime": "04:19:59.987",
"endTime": "04:39:59.986"
}, {
"count_id": 3,
"avg_temperature": 2711,
"startTime": "05:19:59.984",
"endTime": "05:39:59.983"
}]
我想创建一个包含开始时间、结束时间的数组,avg_temperature。我读过可以通过创建响应类型的接口并映射字段来完成。但我不确定如何映射。有人可以帮忙吗?
getHistoryData() {
this.historyDataService.getHistoryData(this.payload)
.subscribe(data => {this.responeData = data as IResponseData[];
console.log(this.responeData);
});
声明 3 个数组来保存开始时间、结束时间和 avg_temperature;
startTime = [];
endTime = [];
avg_temperature = [];
getHistoryData() {
this.historyDataService.getHistoryData(this.payload)
.subscribe(data => {
this.responeData = data.dataPoints as IResponseData[];
this.responseData.forEach(x =>{
this.startTime.push(x.startTime),
this.endTime.push(x.endtime),
this.avg_temperature.push(x.avg_temperature)}
);
});
}
你可以减少对三个独立数组的响应,就像这样非常简单:
// Helper function to map the object response to three arrays
mapResponse(response): DataVM {
return reponse && response.dataPoints ? response.dataPoints.reduce((total, curr) => {
return {
...total,
avgTemp: [...total.avgTemp, curr.avg_temperature],
endTime: [...total.startTime, curr.startTime],
startTime: [...total.endTime, curr.endTime]
}
}, {avgTemp: [], startTime: [], endTime: []}) : null;
}
// Map the response in pipe (Rx 5.5+) or .map (older RxJS versions)
getHistoryData() {
this.historyDataService.getHistoryData(this.payload)
.pipe(map(this.mapResponse))
.subscribe(data => {
console.log(data);
});
您还可以创建一个界面来反映您的视图模型,例如:
export interface DataVM{
avgTemp: number[],
endTime: string[],
startTime: string[]
}
祝你好运!
您似乎在寻找
getHistoryData() {
this.historyDataService.getHistoryData(this.payload).subscribe(response => {
const {dataPoints} = response;
const result = {
startTimes: dataPoints.map(p => p.startTime),
endTimes: dataPoints.map(p => p.endTime),
avgTemperatures: dataPoints.map(p => p.avg_temperature)
};
console.log(result);
});
}
看看这是否适合你。
const data = {
"success": true,
"dataPoints": [{
"count_id": 4,
"avg_temperature": 2817,
"startTime": "00:00:00",
"endTime": "00:19:59.999"
}, {
"count_id": 4,
"avg_temperature": 2814,
"startTime": "00:59:59.997",
"endTime": "01:19:59.996"
}, {
"count_id": 4,
"avg_temperature": 2816,
"startTime": "00:39:59.998",
"endTime": "00:59:59.997"
}, {
"count_id": 4,
"avg_temperature": 2825,
"startTime": "02:19:59.993",
"endTime": "02:39:59.992"
}, {
"count_id": 4,
"avg_temperature": 2828,
"startTime": "02:39:59.992",
"endTime": "02:59:59.991"
}, {
"count_id": 4,
"avg_temperature": 2832,
"startTime": "02:59:59.991",
"endTime": "03:19:59.99"
}, {
"count_id": 4,
"avg_temperature": 2841,
"startTime": "03:39:59.989",
"endTime": "03:59:59.988"
}, {
"count_id": 4,
"avg_temperature": 2816,
"startTime": "01:39:59.995",
"endTime": "01:59:59.994"
}, {
"count_id": 5,
"avg_temperature": 2668,
"startTime": "04:19:59.987",
"endTime": "04:39:59.986"
}, {
"count_id": 3,
"avg_temperature": 2711,
"startTime": "05:19:59.984",
"endTime": "05:39:59.983"
}]
};
const temp = data.dataPoints.map(obj => obj.avg_temperature);
const startTime = data.dataPoints.map(obj => obj.startTime);
const endTime = data.dataPoints.map(obj => obj.endTime);
console.log(temp);
console.log(startTime);
console.log(endTime);
我觉得没什么难的。
如果您有预期的数据,它一定会按预期工作。
const response = {
"success": true,
"dataPoints": [{
"count_id": 4,
"avg_temperature": 2817,
"startTime": "00:00:00",
"endTime": "00:19:59.999"
}, {
"count_id": 4,
"avg_temperature": 2814,
"startTime": "00:59:59.997",
"endTime": "01:19:59.996"
}, {
"count_id": 4,
"avg_temperature": 2816,
"startTime": "00:39:59.998",
"endTime": "00:59:59.997"
}, {
"count_id": 4,
"avg_temperature": 2825,
"startTime": "02:19:59.993",
"endTime": "02:39:59.992"
}, {
"count_id": 4,
"avg_temperature": 2828,
"startTime": "02:39:59.992",
"endTime": "02:59:59.991"
}, {
"count_id": 4,
"avg_temperature": 2832,
"startTime": "02:59:59.991",
"endTime": "03:19:59.99"
}, {
"count_id": 4,
"avg_temperature": 2841,
"startTime": "03:39:59.989",
"endTime": "03:59:59.988"
}, {
"count_id": 4,
"avg_temperature": 2816,
"startTime": "01:39:59.995",
"endTime": "01:59:59.994"
}, {
"count_id": 5,
"avg_temperature": 2668,
"startTime": "04:19:59.987",
"endTime": "04:39:59.986"
}, {
"count_id": 3,
"avg_temperature": 2711,
"startTime": "05:19:59.984",
"endTime": "05:39:59.983"
}]
};
startTime = [];
avg_temperature = [];
endTime = [];
getHistoryData() {
this.startTime = [];
this.avg_temperature = [];
this.endTime = [];
this.historyDataService
.getHistoryData(this.payload)
.subscribe(
(data: any) =>
{
const responeData: any = data.dataPoints;
if(responeData == null){
return; // you don't have the expected data
}
startTime = responeData.map(e => e.startTime);
endTime = responeData.map(e => e.endTime);
avg_temperature = responeData.map(e => e.avg_temperature);
}
);
我想将来自服务的响应映射到不同的数组。我的回复类型为
{
"success": true,
"dataPoints": [{
"count_id": 4,
"avg_temperature": 2817,
"startTime": "00:00:00",
"endTime": "00:19:59.999"
}, {
"count_id": 4,
"avg_temperature": 2814,
"startTime": "00:59:59.997",
"endTime": "01:19:59.996"
}, {
"count_id": 4,
"avg_temperature": 2816,
"startTime": "00:39:59.998",
"endTime": "00:59:59.997"
}, {
"count_id": 4,
"avg_temperature": 2825,
"startTime": "02:19:59.993",
"endTime": "02:39:59.992"
}, {
"count_id": 4,
"avg_temperature": 2828,
"startTime": "02:39:59.992",
"endTime": "02:59:59.991"
}, {
"count_id": 4,
"avg_temperature": 2832,
"startTime": "02:59:59.991",
"endTime": "03:19:59.99"
}, {
"count_id": 4,
"avg_temperature": 2841,
"startTime": "03:39:59.989",
"endTime": "03:59:59.988"
}, {
"count_id": 4,
"avg_temperature": 2816,
"startTime": "01:39:59.995",
"endTime": "01:59:59.994"
}, {
"count_id": 5,
"avg_temperature": 2668,
"startTime": "04:19:59.987",
"endTime": "04:39:59.986"
}, {
"count_id": 3,
"avg_temperature": 2711,
"startTime": "05:19:59.984",
"endTime": "05:39:59.983"
}]
我想创建一个包含开始时间、结束时间的数组,avg_temperature。我读过可以通过创建响应类型的接口并映射字段来完成。但我不确定如何映射。有人可以帮忙吗?
getHistoryData() {
this.historyDataService.getHistoryData(this.payload)
.subscribe(data => {this.responeData = data as IResponseData[];
console.log(this.responeData);
});
声明 3 个数组来保存开始时间、结束时间和 avg_temperature;
startTime = [];
endTime = [];
avg_temperature = [];
getHistoryData() {
this.historyDataService.getHistoryData(this.payload)
.subscribe(data => {
this.responeData = data.dataPoints as IResponseData[];
this.responseData.forEach(x =>{
this.startTime.push(x.startTime),
this.endTime.push(x.endtime),
this.avg_temperature.push(x.avg_temperature)}
);
});
}
你可以减少对三个独立数组的响应,就像这样非常简单:
// Helper function to map the object response to three arrays
mapResponse(response): DataVM {
return reponse && response.dataPoints ? response.dataPoints.reduce((total, curr) => {
return {
...total,
avgTemp: [...total.avgTemp, curr.avg_temperature],
endTime: [...total.startTime, curr.startTime],
startTime: [...total.endTime, curr.endTime]
}
}, {avgTemp: [], startTime: [], endTime: []}) : null;
}
// Map the response in pipe (Rx 5.5+) or .map (older RxJS versions)
getHistoryData() {
this.historyDataService.getHistoryData(this.payload)
.pipe(map(this.mapResponse))
.subscribe(data => {
console.log(data);
});
您还可以创建一个界面来反映您的视图模型,例如:
export interface DataVM{
avgTemp: number[],
endTime: string[],
startTime: string[]
}
祝你好运!
您似乎在寻找
getHistoryData() {
this.historyDataService.getHistoryData(this.payload).subscribe(response => {
const {dataPoints} = response;
const result = {
startTimes: dataPoints.map(p => p.startTime),
endTimes: dataPoints.map(p => p.endTime),
avgTemperatures: dataPoints.map(p => p.avg_temperature)
};
console.log(result);
});
}
看看这是否适合你。
const data = {
"success": true,
"dataPoints": [{
"count_id": 4,
"avg_temperature": 2817,
"startTime": "00:00:00",
"endTime": "00:19:59.999"
}, {
"count_id": 4,
"avg_temperature": 2814,
"startTime": "00:59:59.997",
"endTime": "01:19:59.996"
}, {
"count_id": 4,
"avg_temperature": 2816,
"startTime": "00:39:59.998",
"endTime": "00:59:59.997"
}, {
"count_id": 4,
"avg_temperature": 2825,
"startTime": "02:19:59.993",
"endTime": "02:39:59.992"
}, {
"count_id": 4,
"avg_temperature": 2828,
"startTime": "02:39:59.992",
"endTime": "02:59:59.991"
}, {
"count_id": 4,
"avg_temperature": 2832,
"startTime": "02:59:59.991",
"endTime": "03:19:59.99"
}, {
"count_id": 4,
"avg_temperature": 2841,
"startTime": "03:39:59.989",
"endTime": "03:59:59.988"
}, {
"count_id": 4,
"avg_temperature": 2816,
"startTime": "01:39:59.995",
"endTime": "01:59:59.994"
}, {
"count_id": 5,
"avg_temperature": 2668,
"startTime": "04:19:59.987",
"endTime": "04:39:59.986"
}, {
"count_id": 3,
"avg_temperature": 2711,
"startTime": "05:19:59.984",
"endTime": "05:39:59.983"
}]
};
const temp = data.dataPoints.map(obj => obj.avg_temperature);
const startTime = data.dataPoints.map(obj => obj.startTime);
const endTime = data.dataPoints.map(obj => obj.endTime);
console.log(temp);
console.log(startTime);
console.log(endTime);
我觉得没什么难的。
如果您有预期的数据,它一定会按预期工作。
const response = {
"success": true,
"dataPoints": [{
"count_id": 4,
"avg_temperature": 2817,
"startTime": "00:00:00",
"endTime": "00:19:59.999"
}, {
"count_id": 4,
"avg_temperature": 2814,
"startTime": "00:59:59.997",
"endTime": "01:19:59.996"
}, {
"count_id": 4,
"avg_temperature": 2816,
"startTime": "00:39:59.998",
"endTime": "00:59:59.997"
}, {
"count_id": 4,
"avg_temperature": 2825,
"startTime": "02:19:59.993",
"endTime": "02:39:59.992"
}, {
"count_id": 4,
"avg_temperature": 2828,
"startTime": "02:39:59.992",
"endTime": "02:59:59.991"
}, {
"count_id": 4,
"avg_temperature": 2832,
"startTime": "02:59:59.991",
"endTime": "03:19:59.99"
}, {
"count_id": 4,
"avg_temperature": 2841,
"startTime": "03:39:59.989",
"endTime": "03:59:59.988"
}, {
"count_id": 4,
"avg_temperature": 2816,
"startTime": "01:39:59.995",
"endTime": "01:59:59.994"
}, {
"count_id": 5,
"avg_temperature": 2668,
"startTime": "04:19:59.987",
"endTime": "04:39:59.986"
}, {
"count_id": 3,
"avg_temperature": 2711,
"startTime": "05:19:59.984",
"endTime": "05:39:59.983"
}]
};
startTime = [];
avg_temperature = [];
endTime = [];
getHistoryData() {
this.startTime = [];
this.avg_temperature = [];
this.endTime = [];
this.historyDataService
.getHistoryData(this.payload)
.subscribe(
(data: any) =>
{
const responeData: any = data.dataPoints;
if(responeData == null){
return; // you don't have the expected data
}
startTime = responeData.map(e => e.startTime);
endTime = responeData.map(e => e.endTime);
avg_temperature = responeData.map(e => e.avg_temperature);
}
);