如何从 JSON 文件中获取数据并显示在网页上答案

【问题标题】：how to fetch data from JSON file and display on webpage如何从 JSON 文件中获取数据并显示在网页上
【发布时间】：2018-12-15 07:16:30
【问题描述】：

in angular 我们的应用程序访问存储在服务器端的 JSON 文件。该 JSON 文件包含学生的信息。按下按钮后，我们必须从 JSON 文件中获取数据并显示在网页上

【问题讨论】：

代码在哪里？如果您不发布到目前为止所做的事情，我们应该如何帮助您？

标签： angular

【解决方案1】：

您可以使用 Http 服务对本地环境进行 API 调用，并指向您的 JSON 文件，您可以使用 observable 读取它。使用类似这样的代码：

@Injectable()
export class AppServices{

    constructor(private http: Http) {
         var obj;
         this.getJSON().subscribe(data => obj=data, error => console.log(error));
    }

    public getJSON(): Observable<any> {
         return this.http.get("./file.json")
                         .map((res:any) => res.json())
                         .catch((error:any) => console.log(error));

     }
}

您可以在此处阅读更多信息：
Angular4: how do access local json?

【讨论】：

【解决方案2】：

当您使用 Angular 应用程序时，您可以向服务器发出 HTTP 请求，服务器会返回您所需的 JSON 响应。

获得 JSON 后，您可以将其设置在 .ts 文件中的变量上，根据它是数组还是对象，您可以使用 *ngFor 或仅使用直接对象。

更多信息请参考Angular教程：-

https://angular.io/tutorial/toh-pt6

【讨论】：