How to Display JSON Data in html using Angular 7?

Question

I am getting below JSON Response from OpenWeatherMap API. I Want to Display the CityName, CityCode, Temperature & Description in a HTML Table.

JSON Response :

cnt : 1
list
0
coord
  lon : 79.85
  lat : 6.93
sys
  type : 1
  id : 9098
  message : 0.0032
  country : "LK"
  sunrise : 1554597365
  sunset : 1554641358
weather
  0
main
  temp : 30
  pressure : 1010
  humidity : 70
  temp_min : 30
  temp_max : 30
visibility : 10000
wind
  speed : 2.6
  deg : 200
clouds
  all : 20
dt : 1554655382
id : 1248991
name : "Colombo"

HTML File :

<table class="table table-hover">
          <thead>
            <th>City</th>
            <th>City Code</th>
            <th>Temperature</th>
            <th>Description</th>            
          </thead>
          <tbody>
            <tr>
              <td>{{weather.list.name}}</td>
              <td></td>
              <td></td>
              <td></td>              
            </tr>
          </tbody>
        </table>

Weather.Service.ts :

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

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

  apiKey = '9402da6bd74c395f71604c624cc2b231';
  url;

  constructor(private http:HttpClient) { 
    this.url='http://api.openweathermap.org/data/2.5/group?id=';  //API GET URL

  }

  getWeather(cityCode){
    return this.http.get(this.url+cityCode+'&units=metric&appid='+this.apiKey);
  }

}

Home.component.ts :

import { Component, OnInit } from '@angular/core';
import { WeatherService } from "../shared/weather.service";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  location={    
    code: '1248991'
  };

  public weather: any;

  constructor(private weatherService:WeatherService) {

   }

  ngOnInit() {
    this.weatherService.getWeather(this.location.code).subscribe((Response)=>{
      console.log(Response);
      this.weather = Response;
    })
  }

}

This is the Error that i am getting in Console

ERROR TypeError: Cannot read property 'list' of undefined at Object.eval [as updateRenderer] (HomeComponent.html:30)

It takes time to fetch the data, so for a moment weather is undefined and underined.list throws an error — Misho Tek
– Misho Tek, Commented Apr 7, 2019 at 17:56
Not like that open developer tools in the chrome then select network tab and then refresh your page. click on the weather request in the network tab, then click on the 'response' tab and paste response here — Misho Tek
– Misho Tek, Commented Apr 7, 2019 at 18:20

Misho Tek · Accepted Answer · 2019-04-07 18:00:09Z

2

It takes time to load data from the server, so for a moment, your weather is undefined and undefined.list throws an error. So You have two options: to use elvis operator in your html weather?.list.name it lets you safely access weather or use <table *ngIf="weather" class="table table-hover"> to check if you have weather fetched. Also, make sure that there is .name attribute and that you don't have to iterate with *ngFor

answered Apr 7, 2019 at 18:00

Misho Tek

6642 gold badges11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sajeetharan · Accepted Answer · 2019-04-07 18:30:05Z

1

As i remember , openweathermap api returns list and results as an array, its not an Object. You need to access list property from the response.

Here is a sample response,

{"coord":{"lon":-0.13,"lat":51.51},"weather":[{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"base":"stations","main":{"temp":280.32,"pressure":1012,"humidity":81,"temp_min":279.15,"temp_max":281.15},"visibility":10000,"wind":{"speed":4.1,"deg":80},"clouds":{"all":90},"dt":1485789600,"sys":{"type":1,"id":5091,"message":0.0103,"country":"GB","sunrise":1485762037,"sunset":1485794875},"id":2643743,"name":"London","cod":200}

Also use safe navigation operator ? to handle if there is an empty result on the list.

STACKBLITZ DEMO

edited Apr 7, 2019 at 18:30

answered Apr 7, 2019 at 17:57

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Ahamed Safnaj Over a year ago

The Demo Works..! Thank You

tavOu · Accepted Answer · 2019-04-08 07:01:24Z

1

When i have this problems, i do: {{ weather | json }} in html and see tree.

answered Apr 8, 2019 at 7:01

tavOu

71 bronze badge

Collectives™ on Stack Overflow

How to Display JSON Data in html using Angular 7?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related