Question

我正在尝试从JSON文件中获取数据并以表格形式显示数据

JSON文件链接： https://raw.githubusercontent.com/datameet/railways/master/trains.json

我正在尝试以下代码。但是它在fetchdata.component.ts文件中返回以下错误：

类型“对象”上不存在属性“ json”。

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>

请帮助。

Answer 1

答案可能不是您所想。我建议您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库

Answer 2

Angular的Http和HttpClient模块之间存在区别，它们的导出方式也不同。

Http ->是要求用户调用res.json()的核心模块。这在Angular 4.0之前是很常见的。
HttpClient ->是自4.0版以来的新模块。它将通讯默认设置为json，因此您无需显式调用res.json()。

简而言之，将res.json()更改为res将解决此问题为你。

即this.items = res;应该没问题。

此外，作为一种好的做法，请使用ngOnInit生命周期方法而不是构造函数来进行任何Http调用。

Answer 3

如果您执行简单的*ngFor，则无需调用.json()函数。 Angular为您做到了。只需执行this.http.get。这样就可以了。

UPD：您的JSON对象本身不是数组。您还需要通过以下方式更新模板：

this.items = res

Answer 4

您为什么要this.items = res.json()？为什么不只是this.items = res？ res应该已经保存了GET请求返回的JSON对象。如果确实是字符串，请尝试this.items = JSON.parse(res)。

Answer 5

您可以尝试：

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);
    });
  }

如何从Angular7中的JSON文件中获取和使用数据

5 个答案: