如何在TypeScript中从.json文件中读取数据

Question

我有一个名为data.json的json文件存储在assets文件夹中。

{
    "response": {
        "sales_amount": 0,
        "collection_amount": 0,
        "carts_amount": 736.63,

}
}

我正在尝试这样做，以在service.ts文件中获取数据。

 my_data: any;
  public getResponseData() : Promise<any> {
      if(typeof(this.my_data) === "undefined") {
            return this.http.get('assets/data.json')
            .toPromise().then(res => {

                                  this.my_data = res.json().response;
                                  return this.my_data;
                }).catch(this.handleError);
      } else {
          return Promise.resolve(this.my_data);
      }


  }

我在这里获得了响应，保存在this.my_data中，但在component.ts文件中，我是这样做的：

ngOnInit(){


        this.myService.getResponseData().then(response => this.detailsdata = response);
}

但是在 this.detailsdata 中我没有得到任何东西。

之后，我想在 HTML 文件中显示 sales_amount 和 collection_amount。

<div>
     <span>sales amount</span>
</div>

我想要显示数值，而不是销售金额。如何做到这一点？我对TypeScript非常陌生，有谁可以帮助我吗？

- ananya

Answer 1

您的代码看起来是正确的。我刚在测试应用程序中检查了一下。您需要的只是在HTML文件中添加几行代码。

请将以下代码添加到您的HTML文件中。

<p><b>sales amount:</b> {{ detailsdata?.sales_amount }}</p>
<p><b>collection amount:</b> {{ detailsdata?.collection_amount }}</p>
<p><b>carts amount:</b> {{ detailsdata?.carts_amount }}</p>

顺便提一下，你的json数据无效。删除carts_amount属性后面的逗号。

{
  "response": {
    "sales_amount": 6000.77,
    "collection_amount": 399.57,
    "carts_amount": 736.63
  }
}

更新：

ngOnInit(): void {

        this.myService.getResponseData().then((value) => {
            //SUCCESS
            console.log(value);
            this.detailsdata = value;

        }, (error) => {
            //FAILURE
            console.log(error);
        })
    }

- Sangram Nandkhile

---

谢谢您的回复。实际上，我正在按照您建议的方式尝试（<p><b>销售额：</b>{{ detailsdata?.sales_amount }}</p>），但我没有得到任何结果。而且，使用下面的代码我在控制台中也没有得到任何结果。 ngOnInit(){ this.myService.getResponseData().then(response => this.detailsdata = response); cosole.log('result'+this.detailsdata) }. 因此，我有疑问这是否正确。您能否告诉我这个问题的答案呢？ - ananya

请将{{ detailsdata | json }}放入HTML文件中并检查是否显示任何内容。需要检查数据是否实际从JSON文件中读取。 - Sangram Nandkhile

@ananya，你的控制台不会打印任何东西，因为获取数据的过程将异步运行，并且记录日志的代码(console.log)将在它从服务中获取结果之前执行。请检查我的更新代码，它将在获取值后才记录日志。 - Sangram Nandkhile

谢谢Sangram，我在控制台中得到了结果，并且只使用{{ detailsdata?.sales_amount }}也可以在HTML中获取数据。我在一个新项目中尝试了一下，它可以工作。可能在当前项目中存在一些CSS问题，因此值没有显示出来。 非常感谢您的时间，Sangram。：）：） - ananya