Блог

Я пытаюсь извлечь данные из файла JSON и отобразить эти данные в форме

Ссылка на ФАЙЛ JSON:https://raw.githubusercontent.com/datameet/railways/master/trains.json

Я пытаюсь использовать приведенный ниже код. Но он возвращает следующую ошибку в файле fetchdata.component.ts:

Свойство ‘json’ не существует для типа ‘Object’.

fetchdata.component.ts

 import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-fetchdata',
  templateUrl: './fetchdata.component.html',
  styleUrls: ['./fetchdata.component.css']
})

export class FetchdataComponent implements OnInit {

  private _trainUrl = "https://raw.githubusercontent.com/datameet/railways/master/trains.json
";
  items : any;
  constructor(private http:HttpClient) {
    this.http.get( this._trainUrl)
      .subscribe(res => this.items = res.json());
    console.log(this.items);
  }

  ngOnInit() {
  }

}
  

fetchdata.component.html

 <select>
  <option  *ngFor="let item of items" [value]="item.properties.from_station_name">{{item.properties.from_station_name}}</option>
</select>
  

Пожалуйста, помогите.

Ответ, вероятно, не такой, как вы думаете. Я предлагаю вам console.log() ответ на ваш запрос, чтобы посмотреть, как он выглядит на самом деле:

     items : any;
    constructor(private http:HttpClient) {
      this.http.get( this._trainUrl)
        .subscribe(res => {
          this.items = res.features; 
          console.log("Response", res);
          console.log(res.features)
        });
    }
  

Вы увидите, что на самом деле вы получаете что-то подобное в своей консоли:

 {type: "FeatureCollection", features: Array(5208)}
features: (5208) [{…}, …]
type: "FeatureCollection"
__proto__: Object
  

Таким образом, вы можете присвоить своим элементам features ключ, поскольку это то, что вам действительно нужно:

  constructor(private http:HttpClient) {
      this.http.get( this._trainUrl)
        .subscribe(res => {
          this.items = res["features"]; 
        });
    }
  

Затем должны появиться выбранные вами параметры.

Просто сообщаю вам, что это не идеальный способ сделать это, но он отлично работает для небольшого примера, подобного этому. Я предлагаю вам подумать о создании сервиса для любого запроса в будущем (делать это в конструкторе — не лучший способ) и взглянуть на библиотеку RxJS

Существует разница между угловыми Http и HttpClient модулем, и они также экспортируются по-разному.

1. Http -> является основным модулем , который требует от пользователя вызова res.json() . Это было распространено до появления Angular версии 4.0.

2. HttpClient -> является новым модулем с версии 4.0. По умолчанию связь передается в формате json, и, следовательно, вам не нужно вызывать res.json() явно.

Короче говоря, переход с res.json() на просто res устранит проблему для вас.

то есть this.items = res; все должно быть в порядке.

Кроме того, в качестве хорошей практики используйте ngOnInit метод жизненного цикла вместо конструктора для выполнения любых Http-вызовов.

Зачем вы это делаете this.items = res.json() ? Почему бы просто не this.items = res ? res уже должен содержать объект JSON, возвращенный из запроса GET. Если это действительно строка, попробуйте this.items = JSON.parse(res) .

Можете ли вы попробовать :

 private _trainUrl = "https://raw.githubusercontent.com/datameet/railways/master/trains.json";
  items : any;
constructor(private http:HttpClient) {}


  ngOnInit() {
    this.http.get( this._trainUrl).subscribe(res => {
      this.items = res;
      console.log(this.items);
    });
  }
  

Вам не нужно вызывать .json() функцию, если вы делаете это просто this.http.get . Angular сделает это за вас. Просто делай this.items = res . Это поможет.

UPD: ваш объект JSON сам по себе не является массивом. Вам также необходимо обновить свой шаблон следующим образом:

 <select>
  <option  *ngFor="let item of items.features" [value]="item.properties.from_station_name">{{item.properties.from_station_name}}</option>
</select>