Angular: Accessing data inside a JSON object

Question

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

  }
}

post your component code where you assign data from api to eval array — Sudarshana Dayananda
– Sudarshana Dayananda, Commented Mar 9, 2019 at 1:15
something is not okay. In Weather class you have "cod" and "list" as a separate object. Inide constructor you access "list" as a nested object of "cod". — robert
– robert, Commented Mar 9, 2019 at 1:21

robert · Accepted Answer · 2019-03-09 11:28:33Z

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.

Collectives™ on Stack Overflow

Angular: Accessing data inside a JSON object

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related