CODEWITHSUNDEEP
jsonangular
Devvvvv
Devvvvv

Reputation: 92

Having trouble displaying nested objects in JSON call using Angular

Disclaimer: I am new to Angular :-)

I am experimenting with intertwining Angular and a weather api and I am stumped on how to approach displaying nested data in the JSON payload (Namely, the items under the Historical object). I am able to call and display top level items in the payload.

Here's where I am at:

{{ this.weatherData?.current.precip }} <-- this shows the current precipitation successfully
{{ this.weatherData?.historical.maxtemp }} <--- this doesn't display anything

My API url: https://api.weatherstack.com/historical?access_key=000000hidden0000000&historical_date=2019-08-30&query=london

API documentation: https://weatherstack.com/documentation

Screen shot of console: enter image description here

Many thanks for your coaching and patience that comes with a curious newbie.

Upvotes: 1

Views: 69

Answers (2)

ulmas
ulmas

Reputation: 2253

The historical data is returned by date, so you would have to do like this to show a single date:

{{ this.weatherData?.historical['2018-08-30'].maxtemp }}

Or in a loop to show all dates:

<div *ngFor="let history of this.weatherData?.historical | keyvalue">
  {{ history.key + ': ' + history.value.maxtemp }}
</div>

Upvotes: 1

Umesh
Umesh

Reputation: 2732

The this.weatherData?.historical is an array with key is as Date. If you are certain that there will only be 1 value in this.weatherData?.historical array, you should be able to access it like below:

this.weatherData?.historical[0].maxtemp

Upvotes: 0

Related Questions