Ggtcf

I have a JSON object (pictured below) that I'm bring into an array called "eval".

In Angular, I am referencing this data via:

this.eval.list[0].main.temp

Main and temp are both fields in the array:

I am getting a compilation error, stating "Property 'list' does not exist on type 'Weather[]"

What am I doing wrong?

Weather's code is here:

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;
 

Here is my component code:

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();
 

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

 display()
 console.log(this.weather);
 this.evaluate();
 

 evaluate() 
 if (this.eval.list[0].main.temp < 40) 
 this.light = 2;
 else if (this.eval.list[0].main.temp >= 40 && this.eval.list[0].main.temp < 80) 
 this.light = 3;
 else if (this.eval.list[0].main.temp >= 80) 
 this.light = 1;
 
 console.log(this.eval);
 console.log(this.eval.list[0].main.temp);
 

Here is the WeatherRest service (headers not being used, didn't seem to need them, got a 405 when I did:

import Injectable from '@angular/core';
import HttpClient, HttpHeaders from '@angular/common/http';


@Injectable(
 providedIn: 'root'
)

export class WeatherRestService 
 private url = 'http://api.openweathermap.org/data/2.5/forecast?id=5417598&APPID=';
 private auth = 'xxxxxxxxxxxxxxxxxx';

 constructor(private http: HttpClient) 
 

 index() 
 let headers = new HttpHeaders();
 headers = headers.append('Authorization', 'Basic ');
 headers = headers.append('Content-Type', 'application/json');
 headers = headers.append('Accept', 'application/json');
 headers = headers.append('Content-Encoding', 'none');
 headers = headers.append('Origin', 'http://localhost:4200');


 return this.http.get<any[]>(this.url + this.auth + '&units=imperial');
 // return this.http.get(this.url);

 

This ("Property 'list' does not exist on type 'Weather[]" ) error is coming because inside your Weather class you wrap everything inside a "cod" object. Also the Weather what you receive is not an array it is a simple object. Side note the constructor is not invoked at all. I would do the following changes:

Change the Weather class like this:

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

Then in component:

export class AppComponent implements OnInit {
 weather: Weather;
 eval: Weather;

After these changes you should get a working app. Also I would rename "eval" to something else as "eval" is a function in JS. See this link for details.