将 json 响应数组的值映射到预定义的接口
[英]Mapping the value of json response array to a predefined interface
问题描述
I want to map the value of JSON response to the following interface:
我想将 JSON 响应的值映射到以下接口：
export interface CyHourlyWeather {
temperature: string;
skycon: string;
precipitation: number;
wind: {
speed: number,
direction: number
},
cloudrate: number
}
I want to map the server response into an HourlyWeather: Array<CyHourlyWeather> , so that the array may contain multiple CyHourlyWeather .我想将服务器响应映射到HourlyWeather: Array<CyHourlyWeather> ，以便数组可能包含多个CyHourlyWeather 。 However, the data structure of the array is complicated - I cannot think of a way to filter and map these data.但是，数组的数据结构很复杂——我想不出过滤和映射这些数据的方法。
JSON response: JSON 响应：
"result":{
"status":"ok",
"hourly":{
"status":"ok",
"temperature":[
{
"value":8.0,
"datetime":"2015-09-28 13:00"
},
{},
] // e.g. 1hr, 2hr, 3hr...
"skycon": [{"value": ..., "datetime": ...}, {}],
"precipitation": [{"value": ..., "datetime": ... }, {}],
"wind": [{"speed": ..., "direction": ...}, {}],
"cloudrate": [{"value": ..., "datetime": ... }, {}],
}
}
I know how to retrieve data (eg getting a specific value) and do simple mapping (eg map the response as a single onject but not as an array), but when I try to apply some javascript array (forEach...) and iterative functions, it just somehow fails.我知道如何检索数据（例如获取特定值）并进行简单映射（例如将响应映射为单个 onject 但不是作为数组），但是当我尝试应用一些 javascript 数组（forEach ...）和迭代时功能，它只是以某种方式失败了。 Any suggestions on how to implement this?关于如何实现这一点的任何建议？
Edit - What I have tried:编辑 - 我尝试过的：
this.caiyunForecastService.getCaiyunForecast()
.subscribe( val => this.hourlyWeather = val.map(element => {
return <CyHourlyWeather> {
temperature: element.result.hourly.temperature.value,
skycon: element.result.hourly.skycon.value,
precipitation: element.result.hourly.precipitation.value,
wind: {
speed: element.result.hourly.wind.speed,
direction: element.result.hourly.wind.direction
},
cloudrate: element.result.hourly.cloudrate.value
}
}));
This returns a val.map is not a function and fails.这将返回一个 val.map 不是一个函数并且失败。
Edit 2 - A longer sample response编辑 2 - 更长的样本响应
"result":{
"status":"ok",
"hourly":{
"status":"ok",
"pm25":[ //pm25
{
"value":8.0,
"datetime":"2015-09-28 13:00"
},
{
"value":8.0,
"datetime":"2015-09-28 14:00"
},
{
"value":7.0,
"datetime":"2015-09-28 15:00"
},
{
"value":3.0,
"datetime":"2015-09-28 16:00"
},
{
"value":-0.0,
"datetime":"2015-09-28 17:00"
},
{
"value":-0.0,
"datetime":"2015-09-28 18:00"
},
{
"value":-0.0,
"datetime":"2015-09-28 19:00"
},
{
"value":-0.0,
"datetime":"2015-09-28 20:00"
},
{
"value":-0.0,
"datetime":"2015-09-28 21:00"
},
{
"value":-0.0,
"datetime":"2015-09-28 22:00"
},
{
"value":-0.0,
"datetime":"2015-09-28 23:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 00:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 01:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 02:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 03:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 04:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 05:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 06:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 07:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 08:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 09:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 10:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 11:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 12:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 13:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 14:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 15:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 16:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 17:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 18:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 19:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 20:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 21:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 22:00"
},
{
"value":-0.0,
"datetime":"2015-09-29 23:00"
},
{
"value":-0.0,
"datetime":"2015-09-30 00:00"
},
{
"value":-0.0,
"datetime":"2015-09-30 01:00"
},
{
"value":-0.0,
"datetime":"2015-09-30 02:00"
},
{
"value":-0.0,
"datetime":"2015-09-30 03:00"
},
{
"value":-0.0,
"datetime":"2015-09-30 04:00"
},
{
"value":-0.0,
"datetime":"2015-09-30 05:00"
},
{
"value":3.0,
"datetime":"2015-09-30 06:00"
},
{
"value":8.0,
"datetime":"2015-09-30 07:00"
},
{
"value":14.0,
"datetime":"2015-09-30 08:00"
},
{
"value":19.0,
"datetime":"2015-09-30 09:00"
},
{
"value":24.0,
"datetime":"2015-09-30 10:00"
},
{
"value":29.0,
"datetime":"2015-09-30 11:00"
},
{
"value":33.0,
"datetime":"2015-09-30 12:00"
}
],
"description":"\u66b4\u96e8\u6e10\u5927\uff0c\u4eca\u5929\u665a\u95f421\u70b9\u949f\u540e\u5927\u96e8\uff0c\u5176\u540e\u9634",
"skycon":[
{
"value":"RAIN",
"datetime":"2015-09-28 13:00"
},
{
"value":"RAIN",
"datetime":"2015-09-28 14:00"
},
{
"value":"RAIN",
"datetime":"2015-09-28 15:00"
},
{
"value":"RAIN",
"datetime":"2015-09-28 16:00"
},
{
"value":"RAIN",
"datetime":"2015-09-28 17:00"
},
{
"value":"RAIN",
"datetime":"2015-09-28 18:00"
},
{
"value":"RAIN",
"datetime":"2015-09-28 19:00"
},
{
"value":"RAIN",
"datetime":"2015-09-28 20:00"
},
{
"value":"RAIN",
"datetime":"2015-09-28 21:00"
},
{
"value":"RAIN",
"datetime":"2015-09-28 22:00"
},
{
"value":"RAIN",
"datetime":"2015-09-28 23:00"
},
{
"value":"RAIN",
"datetime":"2015-09-29 00:00"
},
{
"value":"RAIN",
"datetime":"2015-09-29 01:00"
},
{
"value":"RAIN",
"datetime":"2015-09-29 02:00"
},
{
"value":"RAIN",
"datetime":"2015-09-29 03:00"
},
{
"value":"RAIN",
"datetime":"2015-09-29 04:00"
},
{
"value":"RAIN",
"datetime":"2015-09-29 05:00"
},
{
"value":"RAIN",
"datetime":"2015-09-29 06:00"
},
{
"value":"RAIN",
"datetime":"2015-09-29 07:00"
},
{
"value":"RAIN",
"datetime":"2015-09-29 08:00"
},
{
"value":"RAIN",
"datetime":"2015-09-29 09:00"
},
{
"value":"RAIN",
"datetime":"2015-09-29 10:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 11:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 12:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 13:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 14:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 15:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 16:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 17:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 18:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 19:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 20:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 21:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 22:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-29 23:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 00:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 01:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 02:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 03:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 04:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 05:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 06:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 07:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 08:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 09:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 10:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 11:00"
},
{
"value":"CLOUDY",
"datetime":"2015-09-30 12:00"
}
],
And a testing api: https://api.caiyunapp.com/v2/TAkhjf8d1nlSlspN/121.6544,25.1552/forecast.json还有一个测试api： https : //api.caiyunapp.com/v2/TAkhjf8d1nlSlspN/121.6544,25.1552/forecast.json
1 个解决方案
解决方案1
3 已采纳 2019-02-24 09:53:46
Try this in your CaiyunForecastService.在您的 CaiyunForecastService 中试试这个。
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
export interface CyHourlyWeather {
temperature: string;
skycon: string;
precipitation: number;
wind: {
speed: number;
direction: number;
};
cloudrate: number;
}
@Injectable({
providedIn: 'root'
})
export class CaiyunForecastService {
constructor(private http: HttpClient) { }
public getCaiyunForecast(): Observable<CyHourlyWeather[]> {
return this.http.get(
'https://api.caiyunapp.com/v2/TAkhjf8d1nlSlspN/121.6544,25.1552/forecast.json'
).pipe(map((res: any) => this.mapResult(res)));
}
private mapResult(res): CyHourlyWeather[] {
const cyHourlyWeatherArray: CyHourlyWeather[] = [];
for (let i = 0; i < res.result.hourly.temperature.length; i += 1) {
cyHourlyWeatherArray.push({
temperature: res.result.hourly.temperature[i].value,
skycon: res.result.hourly.skycon[i].value,
precipitation: res.result.hourly.precipitation[i].value,
wind: {
speed: res.result.hourly.wind[i].speed,
direction: res.result.hourly.wind[i].direction
},
cloudrate: res.result.hourly.cloudrate[i].value
});
}
return cyHourlyWeatherArray;
}
}
This will return Observable<CyHourlyWeather[]> so you can just subscribe and get the CyHourlyWeather array when it resolves.这将返回Observable<CyHourlyWeather[]>以便您可以订阅并在解析时获取 CyHourlyWeather 数组。 Haven't tested this, let me know if there are any issues.没有测试过，如果有任何问题，请告诉我。
Note this is adapted from an Ionic v4 project.请注意，这是改编自 Ionic v4 项目。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将 axios 响应（数组数组）映射到打字稿接口 - Mapping axios response (array of arrays) to typescript interface
json 响应中 map 中的映射 - Mapping in map in json response
从Angular 4的JSON数组响应中检索一个值 - Retrieve a value from json array response in angular 4
将JSON响应打印为具有键和值的数组 - Print json response as array with key and value
映射到JSON数组 - Mapping over Array of JSON
映射Json形成数组 - mapping Json to form an array
球衣映射json数组 - jersey mapping json array
映射对象键：值对到JSON的对象数组的数组 - Mapping object key : value pair to array of object arrays for JSON
如何按预定义值对对象数组进行排序？ - How to sort an array of objects by a predefined value?
将JSON接口转换为数组 - convert JSON interface to array
相关标签