Unable to read data from a service in HTML table

Question

I am using a service to get data in JSON format for my table in an Angular 7 project. This is the definition of the service.

 getLandingDashboardSnapshotDetails() {
    return this.http.get<Snapshot[]>('<removed>');
  }

This is the snapshot model used in the service

export interface Snapshot {
   RequestsPendingApproval: string,
   TotalApprovedRequests: string,
   TotalDrafts: string,
   TotalRejectedRequests: string 
}

In my .ts file, this is what I've defined.

LandingDashboardSnapshotData: Snapshot[];

ngOnInit() {
    this.messageService.getLandingDashboardSnapshotDetails().subscribe(
      response => {
        this.LandingDashboardSnapshotData = response;
        console.log(this.LandingDashboardSnapshotData)
      },
      errorResponse => { console.log(errorResponse) }
    );

This is how I'm trying to display the data in my table.

<div class="container">
    <table class='reports'>
        <tr *ngFor = "let d of LandingDashboardSnapshotData">
            <th class="reports-data">Pending for Approval : {{ d.RequestsPendingApproval }} </th>
            <th class="reports-data">Total Sent : 11</th>
            <th class="reports-data">Total Drafts : 4</th>
            <th class="reports-data"> Total Rejected : 4</th>
        </tr>
    </table>
</div>

I'm able to see the data from the service using console.log(). However, when I try to run this, I get an error saying : Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. I don't understand why I'm getting the error. How else can I display the data?

when you do "console.log(this.LandingDashboardSnapshotData)"... you get an object array (with multiple values, right?)? — Akber Iqbal
– Akber Iqbal, Commented Dec 18, 2018 at 8:11
Yes, I get all the values. It looks like this : {Requests Pending Approval: 30, Total Drafts: 34, Total Rejected Requests: 36, Total Approved Requests: 34} — Akshat Sood
– Akshat Sood, Commented Dec 18, 2018 at 8:12
since you got "{Requests Pending Approval: 30, Total Drafts: 34, Total Rejected Requests: 36, Total Approved Requests: 34}" it means that you got an object only... not an array... can't use *ngFor; ... try... {{ LandingDashboardSnapshotData.RequestsPendingApproval }} {{ LandingDashboardSnapshotData.TotalDrafts }} {{ LandingDashboardSnapshotData.TotalRejectedRequests }} {{ LandingDashboardSnapshotData.TotalApprovedRequests }} and you will see the results... — Akber Iqbal
– Akber Iqbal, Commented Dec 18, 2018 at 8:15
I tried it. I got an error saying : Cannot read property 'RequestsPendingApproval' of undefined — Akshat Sood
– Akshat Sood, Commented Dec 18, 2018 at 8:18
if the data you got is an object containing multiple arrays... you can try <tr *ngFor = "let d of LandingDashboardSnapshotData.RequestsPendingApproval "> — Akber Iqbal
– Akber Iqbal, Commented Dec 18, 2018 at 8:18

Akshat Sood · Accepted Answer · 2018-12-19 06:10:57Z

1

in your service file

getLandingDashboardSnapshotDetails() {
    return this.http.get<Snapshot>('<removed>');
  }

and then in your component file replace LandingDashboardSnapshotData: Snapshot[]; with LandingDashboardSnapshotData: Array<Snapshot>; and then in constructor define it as an empty array, and after getting response from service try to push it in your array because you are getting object so don't need to assign it just push it in array.

export class AppComponent  {
  LandingDashboardSnapshotData: Array<Snapshot>;

constructor(private http: HttpClient) {
  this.LandingDashboardSnapshotData = [];
}

ngOnInit() {
    this.getLandingDashboardSnapshotDetails().subscribe(
      (response) => {
        this.LandingDashboardSnapshotData = response;
        console.log(this.LandingDashboardSnapshotData)
      }
    );
}
}

here is a link of working example.

edited Dec 19, 2018 at 6:10

Akshat Sood

3852 gold badges8 silver badges22 bronze badges

answered Dec 18, 2018 at 9:54

Farhat Zaman

1,37910 silver badges22 bronze badges

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

2 Comments

Akshat Sood Over a year ago

This worked for me but instead of this.LandingDashboardSnapshotData.push(response); I used this.LandingDashboardSnapshotData = response; Changing the datatype of the LandingSnapshotData variable worked. Thanks for your response!

Farhat Zaman Over a year ago

and also suggest an edit of my answer so it will help others as well.

Derviş Kayımbaşıoğlu · Accepted Answer · 2018-12-18 08:19:28Z

0

It seems that your this.http.get returns something other then array.

typescript declarations are only for development side and type's are become unavailable when they are transposed to JavaScript.

Hence, your this.http.get returns [Object Object] but you are trying to iterate with NgFor which only accepts Arrays.

answered Dec 18, 2018 at 8:19

Derviş Kayımbaşıoğlu

30.9k4 gold badges55 silver badges79 bronze badges

7 Comments

Akshat Sood Over a year ago

Yes, I just checked. It's returning an object of this format {Requests Pending Approval: 30, Total Drafts: 34, Total Rejected Requests: 36, Total Approved Requests: 34. How do I extract values from this? I've already tried using {{ LandingDashboardSnapshotData.RequestsPendingApproval }} and so on but in that I'm getting an error saying : Cannot read property 'RequestsPendingApproval' of undefined

Derviş Kayımbaşıoğlu Over a year ago

your json data includes spaces which is not usual. Requests Pending Approval: 30. have a small chat with your backend developer :)

Akshat Sood Over a year ago

Oh no, that's just the output of console.log(). The actual JSON looks like this : {"Requests Pending Approval":30,"Total Drafts":34,"Total Rejected Requests":36,"Total Approved Requests":34}

Derviş Kayımbaşıoğlu Over a year ago

dont you see that {"Requests Pending Approval":30 has spaces?

Akshat Sood Over a year ago

I got that changed from the backend. Now it is : {"TotalRejectedRequests":36,"TotalDrafts":34,"TotalApprovedRequests":34,"RequestsPendingApproval":30} I am still getting the error saying Cannot read property 'RequestsPendingApproval' of undefined

|

Akber Iqbal · Accepted Answer · 2018-12-18 09:12:34Z

0

following up from your comment "No, it contains only one value for each. That is why the *ngFor isn't working..." try this...

<div class="container">
    <p class='reports' *ngIf="LandingDashboardSnapshotData">
        {{ LandingDashboardSnapshotData.RequestsPendingApproval }} <br/>
        {{ LandingDashboardSnapshotData.TotalRejectedRequests }} <br/>
        etc...
    </p>
</div>

answered Dec 18, 2018 at 9:12

Akber Iqbal

15.1k12 gold badges54 silver badges77 bronze badges

Collectives™ on Stack Overflow

Unable to read data from a service in HTML table

3 Answers 3

2 Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related