A guide on extracting JSON Data and populating an Array in Angular 7

Question

A guide on extracting JSON Data and populating an Array in Angular 7

I have a JSON file stored locally containing various data. My goal is to extract the CityCodes specifically and store them in an array. Then, I plan to send these CityCodes as part of the OpenWeatherMap API request. Finally, I aim to display all the weather records within the HTML file.

CityData.json:

{
    "List": [
    {
    "CityCode": "1248991",
    "CityName": "Colombo",
    "Temp": "33.0",
    "Status": "Clouds"
    },
    {
    "CityCode": "1850147",
    "CityName": "Tokyo",
    "Temp": "8.6",
    "Status": "Clear"
    },
    {
    "CityCode": "2644210",
    "CityName": "Liverpool",
    "Temp": "16.5",
    "Status": "Rain"
    }
]

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 :

Currently passing the area code manually but looking to automate this with the CityCodes fetched from the JSON file.

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

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

  location={    
    code: '1248991'  //Passing Area Code Manually
  };

  public weather: any;

  constructor(private weatherService:WeatherService) {

  }

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

}

home.component.html :

<table class="table table-hover">
          <thead>
            <th>City</th>
            <th>City Code</th>
            <th>Temperature</th>
            <th>Description</th>            
          </thead>
          <tbody>
            <tr *ngFor="let weather of weather">
              <td>{{weather.name}}</td>
              <td>{{weather.id}}</td>
              <td>{{weather.main.temp}}</td>
              <td>{{weather.weather[0].description}}</td>              
            </tr>
          </tbody>
        </table>

json angular typescript angular7

Answer 1

Answer №1

I successfully resolved the issue by storing the JSON Response in an Array.

Home.component.ts

  public data: any;
  public weatherData: any;

  constructor(private weatherService:WeatherService) {

  }

  ngOnInit() {   
    this.weatherService.getJsonData('./assets/City.json').subscribe(response => {
            this.data = response;         //Retrieving JSON Data
            this.fetchWeatherList();    //Calling FetchWeatherList Function
      }); 
  }

  fetchWeatherList(){
    if (this.data) {

      // console.log(this.data);

      const dataList = this.data.List;
      let tempArray : any = [];

      for (let item of dataList) {
        this.weatherService.getWeather(item.CityCode).subscribe((weatherResponse: any) => {
          tempArray.push(weatherResponse.list[0]);         //Adding Response to Array
        })        
      }
      console.log(tempArray)
      this.weatherData = tempArray;   //Assigning Array to Weather Data Constant
    }
  }

Answer 2

I successfully resolved the issue by storing the JSON Response in an Array.

Home.component.ts

  public data: any;
  public weatherData: any;

  constructor(private weatherService:WeatherService) {

  }

  ngOnInit() {   
    this.weatherService.getJsonData('./assets/City.json').subscribe(response => {
            this.data = response;         //Retrieving JSON Data
            this.fetchWeatherList();    //Calling FetchWeatherList Function
      }); 
  }

  fetchWeatherList(){
    if (this.data) {

      // console.log(this.data);

      const dataList = this.data.List;
      let tempArray : any = [];

      for (let item of dataList) {
        this.weatherService.getWeather(item.CityCode).subscribe((weatherResponse: any) => {
          tempArray.push(weatherResponse.list[0]);         //Adding Response to Array
        })        
      }
      console.log(tempArray)
      this.weatherData = tempArray;   //Assigning Array to Weather Data Constant
    }
  }

Answer 3

Answer №2

Begin by fetching JSON data through an HTTP get request and utilize the forkJoin method to concurrently retrieve weather information from an API, similar to Promise.all.

// Include in service
get(url){
    return this.http.get(url);
}

// Component
ngOnInit() {
    this.weatherService.get('url of json file').subscribe((cities:any)=>{
        const {List} = cities;
        const obsArr = List.map(location => this.weatherService.getWeather(location.CityCode));
        forkJoin(obsArr).subscribe(  => { // import forkJoin
            console.log(val)
            this.weatherlist = val; // adjust as needed based on response
        }); 
    })
  }

// HTML
<tr *ngFor="let weather of weatherlist">
    <td>{{weather.name}}</td>
    <td>{{weather.id}}</td>
    <td>{{weather.main.temp}}</td>
    <td>{{weather.description}}</td>              
</tr>

Answer 4

Begin by fetching JSON data through an HTTP get request and utilize the forkJoin method to concurrently retrieve weather information from an API, similar to Promise.all.

// Include in service
get(url){
    return this.http.get(url);
}

// Component
ngOnInit() {
    this.weatherService.get('url of json file').subscribe((cities:any)=>{
        const {List} = cities;
        const obsArr = List.map(location => this.weatherService.getWeather(location.CityCode));
        forkJoin(obsArr).subscribe(  => { // import forkJoin
            console.log(val)
            this.weatherlist = val; // adjust as needed based on response
        }); 
    })
  }

// HTML
<tr *ngFor="let weather of weatherlist">
    <td>{{weather.name}}</td>
    <td>{{weather.id}}</td>
    <td>{{weather.main.temp}}</td>
    <td>{{weather.description}}</td>              
</tr>

Answer 5

Answer №3

To update the weather service, modify it to accept the local JSON file path and read its content.

  public getJsonData(filePath: string){
        return this.http.get(filePath);
  }

In your component, implement the following:

  export class HomeComponent implements OnInit {

  public data: any;
  public weather: any;

  constructor(private weatherService: WeatherService) {}

  ngOnInit() {   
    this.weatherService.getJsonData('./data.json').subscribe(data => {
            this.data = data;
            this.getWeatherList();
      }); 
  }

  getWeatherList(){
    if (this.data) {
      const dataList = JSON.parse(this.data).List;
      for (let temp of dataList) {
        this.weatherService.getWeather(temp.CityCode).subscribe((Response: any) => {
          console.log(Response);
          if (Response && Response.list) {
            this.weather.push(Response.list[0]);
          }
        })
      }
    }
  }
}

For a working example, please refer to this StackBlitz link. Note that file data is hardcoded in the example as StackBlitz cannot read local files.

Answer 6

To update the weather service, modify it to accept the local JSON file path and read its content.

  public getJsonData(filePath: string){
        return this.http.get(filePath);
  }

In your component, implement the following:

  export class HomeComponent implements OnInit {

  public data: any;
  public weather: any;

  constructor(private weatherService: WeatherService) {}

  ngOnInit() {   
    this.weatherService.getJsonData('./data.json').subscribe(data => {
            this.data = data;
            this.getWeatherList();
      }); 
  }

  getWeatherList(){
    if (this.data) {
      const dataList = JSON.parse(this.data).List;
      for (let temp of dataList) {
        this.weatherService.getWeather(temp.CityCode).subscribe((Response: any) => {
          console.log(Response);
          if (Response && Response.list) {
            this.weather.push(Response.list[0]);
          }
        })
      }
    }
  }
}

For a working example, please refer to this StackBlitz link. Note that file data is hardcoded in the example as StackBlitz cannot read local files.

A guide on extracting JSON Data and populating an Array in Angular 7

Answer №1

Answer №2

Answer №3

Similar questions

How to prevent right-clicking on an entire website using Angular, not just specific pages

Typescript: object containing at least one property with the type T assigned

Understanding and handling live JSON data feed on iOS devices

Is there a way to tally up the overall count of digits in a number using TypeScript?

The mat-slide-toggle updates the values for all products, with each value being unique

Produce a single value using the EventEmitter in Angular

Getting a string from JSON using Javascript

Manipulating JSON data by accessing and updating a specific property with the help of a variable

Using TypeScript and Node.js with Express; I encountered an issue where it was not possible to set a class property of a controller using

What is the best way to divide a single file Angular module into separate client-side, server-side, and shared files?

The specified type '{ state: any; dispatch: React.Dispatch<{ type: string; value: any; }>; }' is not compatible with the expected type

Is it possible to nest enums within enums in TypeScript programming?

Troubleshooting the excessive time taken for Angular Material tree re-rendering

Unexpected error encountered in Angular 2 beta: IE 10 displays 'Potentially unhandled rejection [3] SyntaxError: Expected'

Guide to creating varying component sizes using ReactJS and Styled Components

What sets apart the ? operator from incorporating undefined in the type declaration?

The enigmatic occurrence of TypeScript decorators: when a decorator parameter mysteriously transforms into undefined in a particular scenario

What is the best way to remove linear-gradient effects applied by a dark mode theme?

Using Angular 2: Implementing Router into myExceptionHandler

Executing RxJS calls in a sequential manner while allowing inner calls to operate in