2

I want to map the value of JSON response to the following interface:

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. However, the data structure of the array is complicated - I cannot think of a way to filter and map these data.

JSON response: 

 "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 (e.g. getting a specific value) and do simple mapping (e.g. 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. 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.

Edit 2 - A longer sample response

"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

Improve this question
6
  • can you please upload full json response Commented Feb 24, 2019 at 9:20
  • @Dhawal I have updated the response to make it more clear. The full response is too long and it's not good to post it here. Commented Feb 24, 2019 at 9:28
  • richard: Can you show what you have written and what was failing ? Commented Feb 24, 2019 at 9:30
  • If you need to map complex data, i would recommend mapping your responses with an adapter pattern. Here is an example: blog.florimondmanca.com/… Commented Feb 24, 2019 at 9:34
  • @ShashankVivek updated. Commented Feb 24, 2019 at 9:37

1 Answer 1

Reset to default
3

Try this in your 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. Haven't tested this, let me know if there are any issues.

Note this is adapted from an Ionic v4 project.

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

The function seems to return a single CyHourlyWeather. What I want to do is to iterate and return multiple CyHourlyWeather (please see the JSON response above), as the API returns a JSONArray with multiple JSONObject (e.g. [{time: 1hr, value: 12}, {time:2hr, value: 24}]). I believe that if it is of a single object, then your method will work perfectly.
No problem I think I understand, I'll update the answer.
So you want an array of CyHourlyWeather objects from the results? I think the object will have to be more complex than just the current CyHourlyWeather, but I'm not sure I understand the results correctly above.
Can you post more of the actual results so I can get a better idea?
Yes, I want an array of CyhourlyWeather. I will post the full response above.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.