如何在Angular 7中提取JSON数据并加载到数组中

我有一个本地JSON文件和一些数据。我只想从中提取城市代码并存储在数组中。然后我想将城市代码发送到OpenWeatherMapAPI请求。最后要在HTML文件中显示所有天气记录

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：

这里我手动传递区号。相反，我需要在这里发送JSON格式的区号

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>

---

首先使用HTTP get读取JSON，然后使用它从API读取Parallelike Promise.all气象数据

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

//component
ngOnInit() {
    this.weatherService.get('json file url').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; // modify according to 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>

---

首先使用HTTP get读取JSON，然后使用它从API读取Parallelike Promise.all气象数据

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

//component
ngOnInit() {
    this.weatherService.get('json file url').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; // modify according to 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>

---

更新天气服务以获取本地JSON文件路径并读取内容

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

在组件中，请执行以下操作：

  export class HomeComponent implements OnInit {

  public data: any;
  public weather: any;

  constructor(private weatherService: WeatherService) {}

  ngOnInit() {   
    this.weatherServiceget.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]);
          }
        })
      }
    }
  }
}

---

下面是一个工作示例，无法读取stackblitz上的文件数据，因此它是硬编码的

更新天气服务以获取本地JSON文件路径并读取内容

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

在组件中，请执行以下操作：

  export class HomeComponent implements OnInit {

  public data: any;
  public weather: any;

  constructor(private weatherService: WeatherService) {}

  ngOnInit() {   
    this.weatherServiceget.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]);
          }
        })
      }
    }
  }
}

---

下面是一个工作示例，无法读取stackblitz上的文件数据，因此它是硬编码的

我通过将JSON响应推送到数组中解决了这个问题

Home.component.ts

---

我通过将JSON响应推送到一个数组中解决了这个问题

Home.component.ts

---

好的，“/”从组件所在的位置开始，如果您必须返回，则“../shared”就像您必须找出您的路径不工作。。！我应该在ngOnInit中调用getWeatherList方法吗？啊，对不起，我的错。对从json文件获取数据后，调用getWeatherList。我也更新了代码，我无法调用JSON文件。我需要导入它吗？？它位于资产文件夹中。在位置1well“/”处获取JSON中的意外标记o时出错。从组件所在的位置开始，如果必须返回，则返回“../shared”，就像您必须找出路径不工作一样。。！我应该在ngOnInit中调用getWeatherList方法吗？啊，对不起，我的错。对从json文件获取数据后，调用getWeatherList。我也更新了代码，我无法调用JSON文件。我需要导入它吗？？它位于资产文件夹中。获取此错误时，JSON中位置1处出现意外标记o