Having trouble displaying JSON objects using Angular

Question

Having an interesting time pulling this weather_code object to the page. Any ideas? :-)

Here's my code:

    <div *ngFor="let forecast of this.weatherData?.forecasts | keyvalue">
    {{ forecast.value.hourly[0].weather_code }}
    </div>

Please add the desired behavior, the error code if there's any and the typescript code. — JFPicard
– JFPicard, Commented Jan 25, 2021 at 19:21
Hourly is another array so if you need all those values, you can do another *ngFor.. — MikeOne
– MikeOne, Commented Jan 25, 2021 at 19:24
@JFPicard - I simply want to display weather_code on the page. No error. Just the call being logged in Console. — Devvvvv
– Devvvvv, Commented Jan 25, 2021 at 19:29
just a friendly reminder; in your html you don't have to and shouldn't use this. instead of this.weatherData?.forecasts you can just write weatherData?.forecasts — Talha Akca
– Talha Akca, Commented Jan 31, 2021 at 17:26

Talha Akca · Accepted Answer · 2021-01-25 20:12:01Z

2

where is the forecasts array? If the whole object is the displayed object (in your screenshot) you just have to do response.forecast['2021-01-25'].hourly[0].weather_code

answered Jan 25, 2021 at 20:12

Talha Akca

4023 silver badges10 bronze badges

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

5 Comments

Talha Akca Over a year ago

what is array you're trying to iterate. Because in your screenshot there isn't an iterable (array) called forecasts ?

Devvvvv Over a year ago

Trying to go after the Forecast>date>hourly>weather_code

Devvvvv Over a year ago

well, I feel dumb. changed "forecasts" to "forecast" and it works. here is a working snippet: {{ forecast.value.hourly[0].weather_code }}

Devvvvv Over a year ago

question: how do you pull the second item under the forecast array without defining a specific value? These are not working... '{{ forecast.value[1].hourly[0].weather_code }}' '{{ forecast[1].hourly[0].weather_code }}'

Talha Akca Over a year ago

forecast[value].hourly[0].weather_code @Devvvvv

Devvvvv · Accepted Answer · 2021-01-26 21:26:18Z

0

answered Jan 26, 2021 at 21:26

Devvvvv

9210 bronze badges

Collectives™ on Stack Overflow

Having trouble displaying JSON objects using Angular

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related