Чтение / загрузка файла JSON и сохранение данных в локальном файле JSON через angular 5

Question

Я пытаюсь прочитать файл JSON из openweathermap и сохранить его в локальном файле JSON с помощью angular 5. Но по неизвестной мне причине я получаю следующее сообщение в инспекторе браузера:

core.js:1448 ERROR Error: Error trying to diff 'Rotterdam'. Only arrays and iterables are allowed

Не уверен, что именно это означает, и попытка погуглить проблему действительно нашла мне какие-то решения.Также, когда я отлаживаю, похоже, что он может правильно читать JSON из openweathermap, но у меня возникает ощущение, что когда я пытаюсь подписать его на свой локальный JSON, я делаю что-то не так.

Вот код длясервис:

import { Injectable } from '@angular/core';
import { Http, RequestOptions, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/of';

import { City } from '../_models/city.model';
import { Search } from '../_models/search.model';
import { variable } from '@angular/compiler/src/output/output_ast';

const API_URL_SEARCH = 'http://localhost:3000/search';
const API_ARGS: RequestOptions = new RequestOptions();
const headers = new Headers();
headers.append('Content-Type', 'application/json');
API_ARGS.headers = headers;

@Injectable()
export class CityService {
  searchList: Search[];
  private searchURL = 'http://openweathermap.org/data/2.5/weather?q=rotterdam&appid=b6907d289e10d714a6e88b30761fae22';
  constructor(private http: Http) { }

  getOpenWeatherMap(): Observable<Search[]> {
    return this.http.get(this.searchURL)
                    .map(this.extractData)
                    .catch(this.handleError);
  }

  private extractData(res: Response) {
    const body = res.json();
    return body;
  }

  private handleError(error: Response | any) {
    console.error(error.message || error);
    return Observable.throw(error.message || error);
  }
 }

И код для компонента:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { CityService } from '../_shared/city.service';
import { Search } from '../_models/search.model';


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

  searches: Observable<Search[]>;
  searchList: Search[];
  errorMessage: String;
  constructor(private cityService: CityService) { }

  ngOnInit() {
    this.searches = this.cityService.getSearches();
  }

  getOpenWeatherMap() {
    // this.cityService.getOpenWeatherMap()
    //                 .subscribe(result => this.searches = this.cityService.getOpenWeatherMap());
    this.searches = this.cityService.getOpenWeatherMap();
    this.searches.subscribe(
      searchList => this.searchList = searchList,
      error => this.errorMessage = <any>error
    );
  }
}

Код для модели:

export class Search {
  constructor(
      public coord: Coord,
      public weather: Weather,
      public base: string,
      public main: Main,
      public visability: string,
      public wind: Wind,
      public clouds: Clouds,
      public dt: string,
      public sys: Sys,
      public id: string,
      public name: string,
      public cod: string
  ) {}
}

export class Coord {
  constructor(
      public lon: string,
      public lat: string
  ) {}
}

export class Weather {
  constructor(
    public id: string,
    public main: string,
    public description: string,
    public icon: string
  ) {}
}

export class Main {
  constructor(
    public temp: string,
    public pressure: string,
    public sea_level: string,
    public humidity: string,
    public temp_min: string,
    public temp_max: string
  ) {}
}

export class Wind {
  constructor(
    public speed: string,
    public deg: string
  ) {}
}

export class Clouds {
  constructor(
    public all: string
  ) {}
}

export class Sys {
  constructor(
    public type: string,
    public message: string,
    public country: string,
    public sunrise: string,
    public sunset: string
  ) {}
}

Код HTML выглядит следующим образом:

<div class = "container">
  <h2>Search for city</h2>

    <form>
        <div class = "row" >
          <div class="col-sm-12">
      <label for="cityField">City Name:</label>
      <input class="cityField" #cityField>
      <button class="btn btn-primary" (click)="getOpenWeatherMap()">Search</button>
    </div>
    </div>
    </form>

    <div *ngIf="errorMessage"> {{errorMessage}} </div>

    <div class="container">
      <h2>Search</h2>
      <table class="table" style="width:100%">
        <tr>
            <th>City Name</th>
            <th>Country</th>
            <th>weather</th>
            <th>Temp (°C)</th>
            <th></th>
          </tr>
          <tr *ngFor="let Search of searches | async">
              <td>{{Search.name}}</td>
              <td>{{Search.sys.country}}</td>
              <td>{{Search.weather[0].description}}</td>
              <td>{{Search.main.temp}}</td>
              <td><button class="btn btn-danger" (click)="deleteCity(Search)">Delete</button></td>
            </tr>
      </table>
  </div>   
</div>

Любая помощь будет принята с благодарностью.Кстати, я только начал с угловой, поэтому, пожалуйста, имейте в виду, что я не настолько опытен.

Answer 1

Итак, после многих исследований я выяснил, где именно проблема.В заявлении об ошибке упоминается, что он может обрабатывать только массивы и итерации.Итак, мы пришли к выводу, что нужно просто создать массив всего JSON.

Итак, в сервисе:

private extractData(res: Response) {
   const body = res.json();
   return body;
}

это должно было стать:

private extractData(res: Response) {
   const body = Array.of(res.json());
   return body;
}

Это исправило ошибку, и я мог правильно прочитать JSON и скопировать параметры в локальный файл JSON.