java 脚本和 ionic 的对象对象错误

Question

我使用 covid19 实时数据创建了一个移动应用程序。我用过 api.but 我无法从中访问 json 数据。当显示运行s object 对象错误时。here is the current output 这是 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);
  }
  
  
}

这是 html 文件。

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

我需要获得 local_new_cases 和 local_total_cases.Api 连接在这里工作是我运行应用程序成功的事件。final sucessful output.

Answer 1

要在 html 中显示数据，您需要对数据进行字符串化，因此您应该在 html 中使用数据而不是 obj。从

更新 html 代码

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

至

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

java 脚本和 ionic 的对象对象错误

object object error with java script and ionic

javascript

json

angularjs

ionic-framework

ionic4