CODEWITHSUNDEEP
angulartypescript
BenSV
BenSV

Reputation: 169

Accessing object data in Angular

I have a service which returns the following covid-19 data

{
    "data": {
        "total_cases": "14,664,059",
        "recovery_cases": "8,748,094",
        "death_cases": "609,279",
        "last_update": "Jul, 20 2020, 09:21, UTC",
        "currently_infected": "5,306,686",
        "cases_with_outcome": "9,357,373",
        "mild_condition_active_cases": "5,247,063",
        "critical_condition_active_cases": "59,623",
        "recovered_closed_cases": "8,748,094",
        "death_closed_cases": "609,279",
        "closed_cases_recovered_percentage": "93.0",
        "closed_cases_death_percentage": "7.0",
        "active_cases_mild_percentage": "99.0",
        "active_cases_critical_percentage": "1.0",
        "general_death_rate": "4.0"
    },
    "status": "success"
}

service file

@Injectable({
  providedIn: 'root'
})
export class CoviddataserviceService {

  private baseUrl='https://corona-virus-stats.herokuapp.com/api/v1/cases/general-stats';
  constructor(private http:HttpClient) { }

  getWorldData(): Observable<any>{
    return this.http.get(this.baseUrl);
  }
}

component.ts file

export class WorlddataComponent implements OnInit {

  public worlddataArray=[];

  constructor(private cdservice:CoviddataserviceService ) { }

  ngOnInit(): void {
  this.loadWorldData();
  }


  loadWorldData(){
   return this.cdservice.getWorldData().subscribe(data=>this.worlddataArray=data,error=>console.error(error));
     
  }
}

When I try to print that data in html as follows

<td>{{worlddataArray.total_cases}}</td>

it shows the following error

Property 'total_cases' does not exist on type 'any[]'.
<td>{{worlddataArray.total_cases}}</td>
                             ~~~~~~~~~~~

when I just type

 <td>{{worlddataArray}}</td>

It shows only

    [object Object]

I think the error is in my way of accessing that data in the html file.So please suggest a way to do it.Thank you.

Upvotes: 0

Views: 66

Answers (1)

surendra kumar
surendra kumar

Reputation: 1780

use below code.

Declare worlddataArray as below:

  public worlddataArray:any = {};

Write your html code as below:

<td *ngIf="worlddataArray.data">{{worlddataArray.data.total_cases}}</td>

Upvotes: 1

Related Questions