Having trouble displaying nested objects in JSON call using Angular

Question

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:

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

Small correction. My query in the console screen shot was "63129". — Devvvvv
– Devvvvv, Commented Dec 18, 2019 at 1:51

ulmas · Accepted Answer · 2019-12-18 02:09:24Z

1

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>

edited Dec 18, 2019 at 2:09

answered Dec 18, 2019 at 1:55

ulmas

2,25316 silver badges22 bronze badges

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

Comments

Umesh · Accepted Answer · 2019-12-18 01:52:46Z

0

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

answered Dec 18, 2019 at 1:52

Umesh

2,74221 silver badges24 bronze badges

2 Comments

Devvvvv Over a year ago

Thank you both. These responses are quite helpful. This may be a product of my code formatting plugin, but my editor insists on formatting the code like this: {{ (this.weatherData?.historical.maxtemp)[0] }} The parentheses may be throwing it off..?

Devvvvv Over a year ago

Ope. I disabled the code formatting plugin to allow the code to be saved without the parentheses. Now, I am getting a Cannot read property '0' of undefined. It seems the array syntax is not working out.

Collectives™ on Stack Overflow

Having trouble displaying nested objects in JSON call using Angular

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related