object object error with java script and ionic

Question

I create a mobile application with covid19 real time data. i have used api.but i can't access json data from it. when it runs object object error is showing.here is the current output here is the data inside the api.here is the api data.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { LoadingController } from '@ionic/angular';
import { finalize } from 'rxjs/operators';
import { NULL_EXPR } from '@angular/compiler/src/output/output_ast';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {
  data : string;
  error: string;
  loading: any;
  obj: string;
  updatedDateSL: string;
  

  constructor(private http: HttpClient,public loadingController: LoadingController) {
    this.data='';
    this.error='';
    this.obj='';
    this.updatedDateSL='';
    
  }
  
 async ionViewWillEnter() {
    await this.presentLoading();
    // Load the data
    this.prepareDataRequest()
   .pipe(
      finalize(async () => {
          // Hide the loading spinner on success or error
          await this.loading.dismiss();
      })
  )
      .subscribe(
         data=> {                                                                         //data is a java script object that is why it can stringfy.
          //updatedDateSL = data.data.update_date_time;                                   // Set the data to display in the template
          this.data = JSON.stringify(data);                                              //converts to string 
          this.obj=JSON.parse(this.data);                                                //info is a javascript objct
            
            
            //var totCasesSL = info.data.local_total_cases;
            //var totHospitalSL = data.local_total_number_of_individuals_in_hospitals;
            //var totRecoverSL = data.local_recovered;
            //var totDeathSL = data.local_deaths;
            //var newSL = data.local_new_cases;
            //var newDeathSL = data.local_new_deaths;
            //var totActiveSL = data.local_active_cases;   
            //alert(info.update_date_time);
        },
        err => {
          // Set the error information to display in the template
          this.error = `An error occurred, the data could not be retrieved: Status: ${err.status}, Message: ${err.statusText}`;
        }
      );
  }

  async presentLoading() {
    // Prepare a loading controller
    this.loading = await this.loadingController.create({
        message: 'Loading...'
    });
    // Present the loading controller
  await this.loading.present();
}

  private prepareDataRequest(): Observable<object> {
    // Define the data URL
    
    //const dataUrl = 'https://api.nigelbpeck.com/';
    const dataUrl = 'https://hpb.health.gov.lk/api/get-current-statistical/';
    // Prepare the request
    return this.http.get(dataUrl);
  }
  
  
}

here is the html file.

/<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic 4 Example App
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

  <div class="ion-padding">
    <p>Data will be presented here...</p>
    <p *ngIf="!error;else errorContent">{{ obj ? obj : '-' }}</p>
     <ng-template #errorContent><p><span style="color: red;">{{error}}</span></p></ng-template>
    

     
  </div>
</ion-content>

i need to get local_new_cases and local_total_cases.Api connction is working here is the event that i run application sucessfly.final sucessful output.

Answer 1

To show data in html you need to stringify the data so you should use data instead of obj in html . Update html code from

<ion-content>
  <div class="ion-padding">
    <p>Data will be presented here...</p>
    <p *ngIf="!error;else errorContent">{{ obj ? obj : '-' }}</p>
     <ng-template #errorContent><p><span style="color: red;">{{error}}</span></p></ng-template>
  </div>
</ion-content>

to

<ion-content>
  <div class="ion-padding">
    <p>Data will be presented here...</p>
    <p *ngIf="!error;else errorContent">{{ data ? data : '-' }}</p>
     <ng-template #errorContent><p><span style="color: red;">{{error}}</span></p></ng-template>
  </div>
</ion-content>