Hur man läser data från .json-fil i TypeScript

Jag har en json-fil i mappen assets som heter data.json

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

}
}

Jag gör så här för att få data i service.ts-filen

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


  }

Här får jag svar i detta.my_data, men i component.ts-filen gör jag så här

ngOnInit(){


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

men här i denna.detailsdata får jag ingenting.

och efter detta vill jag visa sales_amount,collection_amount i html-filen.

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

I stället för försäljningsbeloppet vill jag visa värdet, hur gör man detta. Jag är väldigt ny på TypeScript. Kan någon snälla hjälpa mig med detta.

Svar #1

Din kod ser korrekt ut. Jag kollade precis det i testapplikationen. Det du behöver är bara några rader kod i HTML-filen.

Vänligen lägg till följande kod i din HTML-fil.

<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>

Förresten, din json-data är ogiltig. Ta bort kommatecknet efter carts_amount-egenskapen.

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

Uppdateringar :

ngOnInit(): void {

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

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