title: How to extract JSON Data and load into an Array in Angular 7
body: <p>I have a local JSON File with some data. I want to extract only the CityCodes from it and store in an Array. Then i want to send the CityCodes to the OpenWeatherMap API Request. Finally want to Display all the Weather Records in the HTML file.</p>
  
  <p>CityData.json : </p>
  
  <pre><code>{
      "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"
      }
  ]
  </code></pre>
  
  <p>Weather.Service.ts :</p>
  
  <pre><code>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+'&amp;units=metric&amp;appid='+this.apiKey);
    }
  
  }
  </code></pre>
  
  <p>home.component.ts :</p>
  
  <p>here i am passing the area code manually. Instead of that i need to send the area codes form JSON here.</p>
  
  <pre><code>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)=&gt;{
        console.log(Response);
        this.weather = Response.list;
      })
    }
  
  }
  </code></pre>
  
  <p>home.component.html :</p>
  
  <pre><code>&lt;table class="table table-hover"&gt;
            &lt;thead&gt;
              &lt;th&gt;City&lt;/th&gt;
              &lt;th&gt;City Code&lt;/th&gt;
              &lt;th&gt;Temperature&lt;/th&gt;
              &lt;th&gt;Description&lt;/th&gt;            
            &lt;/thead&gt;
            &lt;tbody&gt;
              &lt;tr *ngFor="let weather of weather"&gt;
                &lt;td&gt;{{weather.name}}&lt;/td&gt;
                &lt;td&gt;{{weather.id}}&lt;/td&gt;
                &lt;td&gt;{{weather.main.temp}}&lt;/td&gt;
                &lt;td&gt;{{weather.weather[0].description}}&lt;/td&gt;              
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>