Question

我正在尝试从json文件中获取匹配的数据，但无法正常工作。你能找出我做错了什么吗？

this.http.get('test.json')
.subscribe((res: Response) => { 
this.result = res.json(); 
this.displayItems = this.result;
}, error => {
console.log(error);
this.errorFromSubscribe = error;
});

Answer 1

按照注释中的建议，从请求的URL中删除所有空格，您的请求应通过。我已经看到了一些json格式错误，尽管这可能与您从API获得的回购相关。但可以验证请求是否以状态200传递。

onClick() {
      this.http.get('./jsondata/details.json?nm=Cnut&cty=UnitedKingdom&hse=HouseofDenmark&yrs=yrs')
      .subscribe((res: Response) => { 
        console.log(res);
        this.displayItems = this.result;
      }, error => {
        console.log(error);
        this.errorFromSubscribe = error;
      });

  }
}

Answer 2

在您的本地主机上使用此代码，检查http://localhost/jsondata/details.json是否可访问

 this.http.get('./jsondata/details.json?'+encodeURIComponent('nm=Cnut&cty=United Kingdom&hse=House of Denmark&yrs=yrs'))
          .subscribe((res: Response) => { 
            this.result = res.json(); 
            this.displayItems = this.result;
          }, error => {
            console.log(error);
            this.errorFromSubscribe = error;
          });

Answer 3

问题是在测试JSON文件时无法访问。请尝试将JSON部署到可访问的URL或正确设置本地开发环境。

或者，如果您只是想要数据，而您的JSON文件也不是那么大，则可以将其导入到Angular代码中，而不用进行HTTP调用来获取它。

import * as data from './jsondata/details.json'

如何通过Angular 4获取JSON数据

3 个答案: