Retrieve Information in a List

Question

Retrieve Information in a List

I am currently facing an issue while trying to retrieve data from an array. Below is an example of the image array that I am working with. I am specifically looking to get the weather icon data, but unfortunately I encountered this error message:

core.js:15724 ERROR TypeError: Cannot read property '0' of undefined

https://i.sstatic.net/i4dNK.png

Here is the code snippet:

weatherDaily(){
    this.commonService.getWeatherInfoDaily()
    .subscribe(
      (res) => {
        this.daily = res['list'];
        this.icon = res['list']['weather'][0]['icon'];
        console.log(this.icon);


      }
    )
  }

angular typescript

Answer 1

Answer №1

Suppose the code is:

this.icon = res['list'][0]['weather'][0]['icon'];

It's recommended to utilize interfaces when retrieving data from an API. This approach provides you with code suggestion features and simplifies the process of restructuring code if the API undergoes any modifications:

export interface WeatherListResponse {
  dt: number;
  // ... etc
}

export interface WeatherResponse {
  cod: string;
  message: number;
  cnt: number;
  list: WeatherListResponse[];
}

You can then specify generic typings on the HttpClient method to indicate to the compiler the expected response type, triggering an error if incorrect properties are accessed:

getWeatherInfoDaily(): Observable<WeatherResponse> {
  return this.http.get<WeatherResponse>(...);
}

weatherDaily() {
  this.commonService.getWeatherInfoDaily().subscribe((res) => {
    this.daily = res.list;
    // this.icon = res.list.weather[0].icon; <-- TypeScript error
    this.icon = res.list[0].weather[0].icon;

    // With the latest typescript version, you can use optional chaining:
    this.icon = res.list[0]?.weather[0]?.icon;

    console.log(this.icon);
  })
}

Answer 2

Suppose the code is:

this.icon = res['list'][0]['weather'][0]['icon'];

It's recommended to utilize interfaces when retrieving data from an API. This approach provides you with code suggestion features and simplifies the process of restructuring code if the API undergoes any modifications:

export interface WeatherListResponse {
  dt: number;
  // ... etc
}

export interface WeatherResponse {
  cod: string;
  message: number;
  cnt: number;
  list: WeatherListResponse[];
}

You can then specify generic typings on the HttpClient method to indicate to the compiler the expected response type, triggering an error if incorrect properties are accessed:

getWeatherInfoDaily(): Observable<WeatherResponse> {
  return this.http.get<WeatherResponse>(...);
}

weatherDaily() {
  this.commonService.getWeatherInfoDaily().subscribe((res) => {
    this.daily = res.list;
    // this.icon = res.list.weather[0].icon; <-- TypeScript error
    this.icon = res.list[0].weather[0].icon;

    // With the latest typescript version, you can use optional chaining:
    this.icon = res.list[0]?.weather[0]?.icon;

    console.log(this.icon);
  })
}

Retrieve Information in a List

Answer №1

Similar questions

The component I created is not visible on the index page

Retrieve the response status using a promise

Injecting universal data into ValidationErrors in Angular

How to make Angular resolver and component share an injected service?

Trigger a post request by clicking the button to generate an excel report for download

Nest may struggle with resolving dependencies at times, but rest assured they are indeed present

Encountered an issue while configuring the Apollo server - The type '() => void' cannot be assigned to type '() => DataSources<object>'

After installing TypeScript community stubs, WebStorm is unable to locate the module

Display Material UI icons as markers within Highcharts

Changing the default font size has no effect on ChartJS

Establishing a connection pathway for communication among components in Angular

Ways to trigger a function in Angular every 10 seconds

You can't observe the behavior of simulated functions in a class with a manually created mock

How can I decrypt a JWT token using Angular?

An issue has occurred: TypeError - the data is not a function

How can we reduce the size of a JSON object in Typescript before sending it to the client?

Tips for utilizing chodorowicz / ts-debounce effectively

Extending a Svelte component with a P5JS class: A step-by-step guide

Angular 8: How to Filter an Array of Objects Using Multiple Conditions

What is the best way to extract a variable value from the subscribe method and make it available for use in an Angular 10 service method's return statement using TypeScript?