Fetch value from non-iterating JSON object

Question

I have a weather forecasting JSON object not able to fetch specific value from that.I am trying to fetch weather_description from the below json.

JSON

{
    "request": {
        "type": "City",
        "query": "New York",
        "language": "en",
        "unit": "m"
    },
    "location": {
        "name": "New York",
        "country": "United States of America",
        "region": "New York",
        "lat": "40.714",
        "lon": "-74.006",
        "timezone_id": "America/New_York",
        "localtime": "2020-11-23 10:30",
        "localtime_epoch": 1606127400,
        "utc_offset": "-5.0"
    },
    "current": {
        "observation_time": "03:30 PM",
        "temperature": 11,
        "weather_code": 122,
        "weather_icons": [
            "https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0004_black_low_cloud.png"
        ],
        "weather_descriptions": [
            "Overcast"
        ],
        "wind_speed": 19,
        "wind_degree": 340,
        "wind_dir": "NNW",
        "pressure": 1014,
        "precip": 12,
        "humidity": 77,
        "cloudcover": 100,
        "feelslike": 8,
        "uv_index": 3,
        "visibility": 16,
        "is_day": "yes"
    }
}

HTML

<div>{{this.weatherData | keyvalue }}</div>

TS file

 getWeatherReport(data){
      this.weatherService.getWeatherReport(data.location).subscribe(
      data => {this.weatherData = data;    });

Expected Output: Overcast

Actual Output: [object Object],[object Object],[object Object]

Waqas Ahmad · Accepted Answer · 2020-11-27 12:40:29Z

1

KeyValue pipe Sign will not Work in your case. So We have to locate the desired key. Since weather_descriptions is an array so using a loop if there are multiple elements. Here is the Html code for your desired value.

<div *ngIf="this.weatherData && this.weatherData.current && this.weatherData.current.weather_descriptions">
<span *ngFor= "let desc of this.weatherData.current.weather_descriptions">{{desc}}</span>
</div>

edited Nov 27, 2020 at 12:40

answered Nov 23, 2020 at 19:21

Waqas Ahmad

446 bronze badges

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

2 Comments

Anonymous Over a year ago

Now getting the expected output. But still in console window getting the following error core.js:4442 ERROR TypeError: Cannot read property 'current' of undefined at DashboardComponent_Template (dashboard.component.html:9)

Waqas Ahmad Over a year ago

you could add some null check validation over the div. Edited my answer.

Collectives™ on Stack Overflow

Fetch value from non-iterating JSON object

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related