Search code examples
jsonangularapiionic-frameworkionic4

JSON data not fetching First time in IONIC and ANJULAR

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';
import { RouterModule } from '@angular/router';

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

export class HomePage {
  data2 : string;
  error: string;
  loading: any;
  obj: string;
  updatedDateSL: string;
  TotSL: string;
  TotSL2: string;
  TotSL3: string;
  TotSL5: string;
  TotSL4: string;
  

  constructor(private http: HttpClient,public loadingController: LoadingController) {
    this.data2='';
    this.error='';
    this.obj='';
    this.TotSL='';
    this.TotSL2='';
    this.TotSL3='';
    this.TotSL4='';
    this.TotSL5='';
    
  }
  
 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(
         data2=> {  
                    console.log(data2)
          this.TotSL3= JSON.stringify(data2.data.update_date_time);
          this.TotSL= JSON.stringify(data2.data.local_new_cases);
          this.TotSL2= JSON.stringify(data2.data.local_total_cases);
          this.TotSL4= JSON.stringify(data2.data.local_deaths);
          this.TotSL5= JSON.stringify(data2.data.local_new_deaths);   
          // Set the data to display in the template
                                                                

            
            
        },
        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://hpb.health.gov.lk/api/get-current-statistical/';
    // Prepare the request
    return this.http.get(dataUrl);
  }
  
  doRefresh(event) {
    console.log('Begin async operation');

    setTimeout(() => {
      console.log('Async operation has ended');
      event.target.complete();
    }, 2000);
  }

}

when i run this code first time there is problem showing in vs code " Property 'data' does not exist on type 'object'.ts(2339)" and when i complie it with ionic serve it shows nothing in the web browser,[this is intial stage]but after i am dong some change this code and after save it in this code, it begins to work and fetch data from the api.in terminal it says "complied Successfully" so how to resolve this issue. Out put when it is working.but red lines still there in my vs code editor.this is how my editor shows .

This is a mobile application for get COVID19 real time data in my Country.

Solution

  • Are you seeing any compile time errors in the terminal?

    To resolve your data issue you can cast it to any.

    .subscribe((data2:any)=>{...}

    data2:any will resolve your issue which is visible in the screenshot.