Angular12 get API making table data not showing - html

Question

So I'm trying to make a table that use ngFor for every data in the API. I tried a tutorial in Youtube video and it is working fine. Now I'm trying it with the API given to me, but the problem is the data is not coming out in the table
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<!-- TABLE: LATEST ORDERS -->
<div class="card">
<div class="card-header border-transparent">
<h3 class="card-title">Latest Orders</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body p-0">
<div class="table-responsive">
<table class="table m-0">
<thead>
<tr>
<th>Order ID</th>
<th>Item</th>
<th>Status</th>
<th>Popularity</th>
</tr>
</thead>
<tbody>
<tr>
<td>OR9842</td>
<td>Call of Duty IV</td>
<td><span class="badge badge-success">Shipped</span></td>
<td>
<div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
</td>
</tr>
<tr *ngFor="let campaign of campaigns | async">
<td>{{campaign.id}}</td>
<td>{{campaign.name}}</td>
<td><span class="badge badge-warning">Pending</span></td>
<td>
<div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.card-body -->
<div class="card-footer clearfix">
</div>
<!-- /.card-footer -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div> <!-- /.row -->
campaign.component.ts
import { Component, OnInit } from '#angular/core';
import { GetServiceService } from '../get-service.service';
#Component({
selector: 'app-campaign',
templateUrl: './campaign.component.html',
styleUrls: ['./campaign.component.css']
})
export class CampaignComponent implements OnInit {
campaigns;
constructor(
private campaignService: GetServiceService,
) { }
ngOnInit(): void {
this.campaigns = this.campaignService.getCampaign();
}
}
get-service.service.ts
import { Injectable } from '#angular/core';
import { HttpClient } from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class GetServiceService {
constructor(
private http: HttpClient
) { }
getCampaign(){
return this.http.get('https://emaillead.aturtoko.id/api/v1/campaign')
}
}
So my expectation is that this code would give out the list of data in my API (ignore the first ). What actually happen is that the table only show the first , which means the data is not showing up on the table.
The error in the console is
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
at NgForOf.ngDoCheck (common.js:3184)
at callHook (core.js:2536)
at callHooks (core.js:2495)
at executeCheckHooks (core.js:2427)
at refreshView (core.js:9474)
at refreshComponent (core.js:10636)
at refreshChildComponents (core.js:9261)
at refreshView (core.js:9515)
at refreshEmbeddedViews (core.js:10590)
at refreshView (core.js:9489)
The data in api from postman get is
{
"success": true,
"message": "success",
"data": [
{
"id": 1,
"name": "buattoko"
},
{
"id": 2,
"name": "omnipos"
},
{
"id": 3,
"name": "pluscampaign"
}
]
}
what do I need to do to get the data to the table?

Answer 1

Add pipe and map rxjs operator to transform the result as response.data.
get-service.service.ts
import { map } from 'rxjs/operators';
getCampaign() {
return this.http.get('https://emaillead.aturtoko.id/api/v1/campaign')
.pipe(map((response: any) => response.data));
}
Sample Solution on StackBlitz