如何在 Angular 7 中提取 JSON 数据并加载到数组中 [英] How to extract JSON Data and load into an Array in Angular 7
问题描述
我有一个包含一些数据的本地 JSON 文件.我只想从中提取 CityCodes 并存储在一个数组中.然后我想将 CityCodes 发送到 OpenWeatherMap API 请求.最后想在 HTML 文件中显示所有天气记录.
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.
城市数据.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"
}
]
天气.Service.ts:
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 :
home.component.ts :
这里我手动传递区号.而不是我需要在这里发送 JSON 形式的区号.
here i am passing the area code manually. Instead of that i need to send the area codes form JSON here.
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 :
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 响应推送到数组中解决了这个问题.
I Solved it by pushing the JSON Response into an Array.
Home.component.ts
public data: any;
public weather: any;
constructor(private weatherService:WeatherService) {
}
ngOnInit() {
this.weatherService.getJsonData('./assets/City.json').subscribe(data => {
this.data = data; //Reading JSON Data
this.getWeatherList(); //Calling GetWeatherList Function
});
}
getWeatherList(){
if (this.data) {
// console.log(this.data);
const dataList = this.data.List;
let tempArr : any = [];
for (let temp of dataList) {
this.weatherService.getWeather(temp.CityCode).subscribe((Response: any) => {
tempArr.push(Response.list[0]); //Pushing Response to Array
})
}
console.log(tempArr)
this.weather = tempArr; //Assigning Array to Weather Constant
}
}
这篇关于如何在 Angular 7 中提取 JSON 数据并加载到数组中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!