Encountered an issue while trying to read the property 'temp' of undefined within an HTML document

Question

Encountered an issue while trying to read the property 'temp' of undefined within an HTML document

Can someone help me with this issue?

I'm facing an error with the JSON data retrieved from an API:

ERROR in src/app/weather/weather.component.ts(39,30): error TS2339: Property 'main' does not exist on type 'Iweather[]'

Here is the JSON data causing the problem:

{
  "main": {
    "temp": 28,
    "feels_like": 32.95,
    "temp_min": 28,
    "temp_max": 28,
    "pressure": 1008,
    "humidity": 78
  }    
}

I am struggling to display the JSON data in my HTML file.

Below is my interface definition:

    export interface IWeather {
        name : string;
        main: any[];
    }

This is a snippet of my services.ts file:

    import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { Observable, Subject } from 'rxjs';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/catch';
    import { Iweather } from './Data-Interface';


    @Injectable({
      providedIn: 'root'
    })
    export class WeatherServiceService {

      constructor( private http : HttpClient) { }

      getRequest(val) : Observable<Iweather[]>{
        let APP_ID ="myAPICode";
        let cityName = val;
        let url ='https://api.openweathermap.org/data/2.5/weather?q=' + cityName + '&units=metric&appid=' + APP_ID;
         return this.http.get<Iweather[]>(url);
      }
    }

This is part of my component code:

      import { Component, OnInit } from '@angular/core';
      import { WeatherServiceService } from '../weather-service.service';
      import { Iweather } from '../Data-Interface';
      import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
      @Component({
        selector: 'app-weather',
        templateUrl: './weather.component.html',
        styleUrls: ['./weather.component.css']
      })
      export class WeatherComponent implements OnInit {

        options: FormGroup;
        floatLabelControl = new FormControl('auto');
        constructor(private WeatherService : WeatherServiceService , fb: FormBuilder) { 
          this.options = fb.group({
            floatLabel: this.floatLabelControl
          });
        }

        public weatherData : Iweather[] = [];

        ngOnInit() {}

        public cityName ="";
        public Status = "true";
        public humidity = "";
        public pressure = "";
        public wind_speed = "";
        public weather = "";
        public temp :string;

        getWeatherReport(value) {
          this.Status = 'false';
          this.cityName =value;
          this.WeatherService.getRequest(this.cityName)
          .subscribe((data : Iweather[]) => {
            this.temp = data.main.temp;
            this.humidity = data.main.humidity;
            this.pressure = data.main.pressure;
            this.weatherData = data;
          }); 
        }
      }

And here is an excerpt from my HTML file:

       {{ weatherData.name }}

angular typescript

Answer 1

Answer №1

There are a couple of ways to address this issue:

1) Instead of using this.temp = data.main, try this.temp = data["main"] or

2) Another approach is to define an interface :

export interface Iweather {
    main: {
    temp: number,
    feels_like: number,
    temp_min: number,
    temp_max: number,
    pressure: number,
    humidity: number
        }
    };

Answer 2

There are a couple of ways to address this issue:

1) Instead of using this.temp = data.main, try this.temp = data["main"] or

2) Another approach is to define an interface :

export interface Iweather {
    main: {
    temp: number,
    feels_like: number,
    temp_min: number,
    temp_max: number,
    pressure: number,
    humidity: number
        }
    };

Answer 3

Answer №2

The issue lies in the discrepancy between the interface property 'main' being defined as an array, while the API response treats it as an object rather than an array. One possible solution is to create a model object (let's call it MyData.model.ts) specifically for the 'main' object, and then update the interface to reflect this: main: MyData[]; If you are confident that only one main object will be returned from the API response, you can directly access it using index [0] in your code, otherwise you may need to iterate over it using a foreach loop.

Answer 4

The issue lies in the discrepancy between the interface property 'main' being defined as an array, while the API response treats it as an object rather than an array. One possible solution is to create a model object (let's call it MyData.model.ts) specifically for the 'main' object, and then update the interface to reflect this: main: MyData[]; If you are confident that only one main object will be returned from the API response, you can directly access it using index [0] in your code, otherwise you may need to iterate over it using a foreach loop.

Answer 5

Answer №3

Your data variable contains an array of the Iweather interface. In your subscribe method, you are attempting to access the main property directly from the array. Instead, you should iterate through its elements using a loop like foreach, or specify a specific index such as data[0] to access the main property.

.subscribe((data : Iweather[]) => {
        //since you need data for a single day, there is no need to loop
        this.temp = data[0].main.temp; 
        this.humidity = data[0].main.humidity;
        this.pressure = data[0].main.pressure;
        //You have declared weatherData as an IWeather[] array so I am not changing that.
        this.weatherData = data;
      });

Edit: I have revised the code block above. Since you are receiving and only require weather data for a single day, looping through the data is unnecessary. Simply retrieve the main property of the first element in the IWeather array.

Answer 6

Your data variable contains an array of the Iweather interface. In your subscribe method, you are attempting to access the main property directly from the array. Instead, you should iterate through its elements using a loop like foreach, or specify a specific index such as data[0] to access the main property.

.subscribe((data : Iweather[]) => {
        //since you need data for a single day, there is no need to loop
        this.temp = data[0].main.temp; 
        this.humidity = data[0].main.humidity;
        this.pressure = data[0].main.pressure;
        //You have declared weatherData as an IWeather[] array so I am not changing that.
        this.weatherData = data;
      });

Edit: I have revised the code block above. Since you are receiving and only require weather data for a single day, looping through the data is unnecessary. Simply retrieve the main property of the first element in the IWeather array.

Encountered an issue while trying to read the property 'temp' of undefined within an HTML document

Answer №1

Answer №2

Answer №3

Similar questions

TypeScript code runs smoothly on local environment, however encounters issues when deployed to production

Tips for receiving @ mentions in PrimeNg Editor using Quill and quill-mention with Angular

Combining Angular and Material Design: matdrawer and mattoolbar creating an overlapping effect

An error was encountered at line 7800, character 18 in the three-core.d.ts file in the node_modules/@types/three directory. The error message reads: "Cannot find name 'VRDisplay

Error message in TypeScript with Puppeteer library: "Element not found"

Exploring Angular's Implementation of D3 Force Simulation

Ways to incorporate External JS and CSS files into Angular 5 (loading files with a delay)

"Troubleshooting: The Angular Check-All feature is unexpectedly selecting disabled checkboxes within the ngx data

Tips for seamlessly embedding Youtube iframes within Angular2 components. Resolving issues with unsafe value errors

Discover the steps to initiate Firefox in Incognito Mode using NodeJS and Selenium!

What could be causing the peculiar behavior I am experiencing when a child component attempts to display values from an object fetched in the parent component?

Tips for securely encrypting passwords before adding them to a database:

Errors encountered while starting Angular due to issues in package.json configuration

Combining the Partial<CssStyleDeclaration> union type with a dictionary can lead to potential typing complications when the implicit any flag is

Angular4: Automatically disable button after it is clicked within ngFor loop

Is there a way to make a mat-form-field read-only?

Retrieving latitude and longitude from place id in an Angular Google Maps component

Tips for sorting queries within a collection view in Mongoose:

Discover the combined type of values from a const enum in Typescript

Angular: Determining when a form has returned to its original state