将 json 响应数组的值映射到预定义的接口答案

【问题标题】：Mapping the value of json response array to a predefined interface将 json 响应数组的值映射到预定义的接口
【发布时间】：2019-02-24 09:12:35
【问题描述】：

我想将JSON响应的值映射到如下接口：

export interface CyHourlyWeather {
    temperature: string;
    skycon: string;
    precipitation: number;
    wind: {
        speed: number,
        direction: number
    },
    cloudrate: number
}

我想将服务器响应映射到HourlyWeather: Array<CyHourlyWeather>，这样数组就可以包含多个CyHourlyWeather。但是，数组的数据结构很复杂——我想不出过滤和映射这些数据的方法。

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": ... }, {}],
        }
  }

我知道如何检索数据（例如获取特定值）并进行简单映射（例如将响应映射为单个对象而不是数组），但是当我尝试应用一些 javascript 数组时（forEach... ) 和迭代函数，它只是以某种方式失败。关于如何实现这一点的任何建议？

编辑 - 我尝试过的：

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

这返回一个 val.map 不是一个函数并且失败。

编辑 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"
                }
            ],

还有一个测试 api：https://api.caiyunapp.com/v2/TAkhjf8d1nlSlspN/121.6544,25.1552/forecast.json

【问题讨论】：

你能上传完整的json响应吗
@Dhawal 我已经更新了回复以使其更加清晰。完整回复太长，不宜发在这里。
richard：你能展示一下你写的东西和失败的地方吗？
如果您需要映射复杂数据，我建议您使用适配器模式映射您的响应。这是一个例子：blog.florimondmanca.com/…
@ShashankVivek 已更新。

标签： javascript angular typescript ionic-framework

【解决方案1】：

在你的 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;
  }
}

这将返回Observable<CyHourlyWeather[]>，因此您可以订阅并在解析时获取 CyHourlyWeather 数组。没有测试过，如果有问题请告诉我。

注意这是改编自 Ionic v4 项目。

【讨论】：

该函数似乎返回一个 CyHourlyWeather。我想要做的是迭代并返回多个 CyHourlyWeather（请参阅上面的 JSON 响应），因为 API 返回一个带有多个 JSONObject 的 JSONArray（例如 [{time: 1hr, value: 12}, {time:2hr, value: 24}]）。我相信，如果它是单个对象，那么您的方法将完美运行。
没问题我想我明白了，我会更新答案。
所以你想要一个来自结果的 CyHourlyWeather 对象数组？我认为该对象必须比当前的 CyHourlyWeather 更复杂，但我不确定我是否正确理解了上面的结果。
您能否发布更多实际结果，以便我获得更好的想法？
是的，我想要一组 CyhourlyWeather。我将在上面发布完整的回复。