Trouble while fetching data from API in Angular

Question

I am trying to get data from an API, when I console.log() it , I am getting the data in console, but when I try to get it in my table , I am getting following error: ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

my ts file

CovidPatients:any=[];

  show() {
    this.http.get('https:API-URL').subscribe(responseData=>{
    const data1=JSON.stringify(responseData)
    this.CovidPatients=JSON.parse(data1)  
    console.log(data1);

    })
  }

html

 <tr *ngFor="let data of CovidPatients">
        <td>{{data.agebracket}}</td> 
         <td>{{data.contractedfromwhichpatientsuspected}}</td>
        <td>{{data.currentstatus}}</td>
<tr>

In the API the data is in nested Array , I think that might be the problem:

{
    "raw_data": [
        {
            "agebracket": "",
            "contractedfromwhichpatientsuspected": "",
            "currentstatus": "Hospitalized",
            "dateannounced": "10/05/2020",
            "detectedcity": "",
            "detecteddistrict": "",
            "detectedstate": "",
            "entryid": "",
            "gender": "",
            "nationality": "",
            "notes": "",
            "numcases": "2",
            "patientnumber": "37900",
            "source1": "https://twitter.com/ANI/status/1259331384851775488?s=09",
            "source2": "",
            "source3": "",
            "statecode": "RJ",
            "statepatientnumber": "",
            "statuschangedate": "",
            "typeoftransmission": ""
        },
        {
            "agebracket": "",
            "contractedfromwhichpatientsuspected": "",.....................

How to display the data in the table.

Try with this.CovidPatients=JSON.parse(data1).raw_data inside subscribe — Edy Silva
– Edy Silva, Commented May 18, 2020 at 13:21
BTW, don't put your response through JSON.stringify and JSON.parse, it's a completely unnecessary computation. — mbojko
– mbojko, Commented May 18, 2020 at 13:23

Kishan · Accepted Answer · 2020-05-18 13:21:33Z

1

CovidPatients is not an array. Change your for loop to this:

<tr *ngFor="let data of CovidPatients.raw_data">

answered May 18, 2020 at 13:21

Kishan

9356 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thisdotutkarsh · Accepted Answer · 2020-05-18 13:35:34Z

1

You can do the following,

show() {
this.http.get('https:API-URL').subscribe(responseData => {
    this.CovidPatients = responseData['raw_data']
    console.log(this.CovidPatients);
})}

Then inside your template file, you can iterate through the array using *ngFor structural directive,

<tbody *ngFor="let data of CovidPatients">
<tr>
    <td>{{data.agebracket}}</td>
    <td>{{data.contractedfromwhichpatientsuspected}}</td>
    <td>{{data.currentstatus}}</td>
</tr>
<tbody>

edited May 18, 2020 at 13:35

answered May 18, 2020 at 13:28

thisdotutkarsh

9806 silver badges7 bronze badges

Comments

Yash Rami · Accepted Answer · 2020-05-18 13:58:36Z

1

JSON.stringify and JSON.parse both are unrequired if and only if you are getting the JSON object in response. In *ngFor you can iterate the array of object if you are not using a keyvalue pipe. In your JSON object raw_data is array so you can try like this

<tr *ngFor="let data of CovidPatients.raw_data">
{{data.agebracket}}
.
.
.
</tr>

edited May 18, 2020 at 13:58

answered May 18, 2020 at 13:30

Yash Rami

2,3371 gold badge12 silver badges16 bronze badges

2 Comments

Rupam Over a year ago

Thanks for the answer , but if I don't parse it , It won't return the string value, I am getting an object in the console and nothing in view.

Yash Rami Over a year ago

ohh okay so you are getting the string as response, so you have to parse for iterating and one more question in every API you are getting the string as response on only this one?

Collectives™ on Stack Overflow

Trouble while fetching data from API in Angular

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related