Ufdjrw

I am building a widget that pulls in a weather API, then presents an image based on the data in said API. I'm having trouble accessing the data in the component. I can't quite see where I am going wrong.

The flow here:
On init, I subscribe to the data. I then (try) to assign that to another array (eval). Then, I call the evaluate method and execute the business logic.

The problem: I know that I am incorrect in the way I'm accessing eval[0] but if I move it to list[0], it won't compile. The data feed includes a list array that has the temp field in it.

Thank you!

import WeatherRestService from './../weatherRest.service';
import Component, OnInit from '@angular/core';
import Weather from '../models/weather';

@Component(
 selector: 'app-widget',
 templateUrl: './widget.component.html',
 styleUrls: ['./widget.component.css']
)
export class WidgetComponent implements OnInit 

 weather: Weather[];
 eval: Weather[] = [];
 light = 0;

 constructor(public rest:WeatherRestService) 

 ngOnInit() 
 this.index();
 this.evaluate();
 

 index() 
 this.rest.index().subscribe(
 weather => this.weather = weather; ,
 err => 
 console.error('error retreiving properties');
 console.error(err);
 
 );
 this.eval = this.weather; 
 


 evaluate() 
 if (this.eval[0].list.main.temp < 20) 
 this.light = 1;
 else if (this.eval[0].list.main.temp >= 20 && this.eval[0].list.main.temp < 50) 
 this.light = 2;
 else if (this.eval[0].list.main.temp >= 50) 
 this.light = 3;
 
 

Here is an example of the JSON from the API:

"cod":"200","message":0.008,"cnt":38,"list":["dt":1552024800,"main":"temp":268.93,"temp_min":266.967,"temp_max":268.93,"pressure":1015.34,"sea_level":1015.34,"grnd_level":751.71,"humidity":72,"temp_kf":1.96,"weather":["id":800,"main":"Clear","description":"clear sky","icon":"01n"],"clouds":"all":0,"wind":"speed":2.26,"deg":242.501,"sys":"pod":"n","dt_txt":"2019-03-08 06:00:00","dt":1552035600,"main":"temp":267.23,"temp_min":265.757,"temp_max":267.23,"pressure":1015.09,"sea_level":1015.09,"grnd_level":750.66,"humidity":68,"temp_kf":1.47,"weather":["id":800,"main":"Clear","description":"clear sky","icon":"01n"],"clouds":"all":0,"wind":"speed":2.32,"deg":226.502,"sys":"pod":"n","dt_txt":"2019-03-08 09:00:00","dt":1552424400,"main":"temp":275.391,"temp_min":275.391,"temp_max":275.391,"pressure":1004,"sea_level":1004,"grnd_level":744.59,"humidity":83,"temp_kf":0,"weather":["id":600,"main":"Snow","description":"light snow","icon":"13d"],"clouds":"all":88,"wind":"speed":1.58,"deg":82.5016,"rain":,"snow":"3h":0.425,"sys":"pod":"d","dt_txt":"2019-03-12 21:00:00"],"city":"id":5417598,"name":"Colorado Springs","coord":"lat":38.8339,"lon":-104.8214,"country":"US"

Here, too, is the model I'm using:

export class Weather 
 cod: 
 city: 
 id: number,
 name: string
 ;
 list: 
 main: 
 humidity: number,
 temp: number,
 
 ;


 constructor(i?: number, n?: string, h?: number, t?: number) 
 this.cod.city.id = i;
 this.cod.city.name = n;
 this.cod.list.main.humidity = h;
 this.cod.list.main.temp = t;
 

The code has several problems related asynchronious data fetching:

• 
  this.eval = this.weather; is dependent on subscription, so you need to assign it inside of subscribe
  


• the method evaluate is dependant on this.eval
  

You need to put all operations that depend on this.rest.index inside of subscribe to it:

ngOnInit() 
 this.index();


index() 
 this.rest.index().subscribe(
 weather => 
 this.weather = weather;
 this.eval = this.weather; 
 this.evaluate();
 ,
 err => 
 console.error('error retreiving properties');
 console.error(err);
 );

You could check the sample blew. we could access this.eval in the complete callback function. We must use Non-blocking style for this kind of stuff, the code will not be blocked and wait. We could not access this.eval like we do in sychronize style.

myObservable.subscribe(
 x => console.log('Observer got a next value: ' + x),
 err => console.error('Observer got an error: ' + err),
 **() => console.log('Observer got a complete notification')**
);