Despite encountering similar questions, none have successfully resolved my issue. Any assistance would be greatly appreciated. I am currently attempting to populate a table with data from my database. While I can successfully log the information, I encounter an error when trying to iterate through it.
Admin.HTML
<div class="col">
<button class="btn btn-primary" (click)="getData()">Customer Data</button>
</div>
<div class="col-sm-8 col-md-8">
<table class="col table table-striped">
<thead>
<tr>
<th scope="col-2">Name</th>
<th scope="">Phone Number</th>
<th scope="col-2">Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let customer of customers">
<th scope="row">{{ customer.name }}</th>
<td>{{ customer.number }}</td>
<td>{{ customer.email }}</td>
</tr>
</tbody>
</table>
</div>
admin.ts
import { Component, OnInit } from '@angular/core';
import { Response } from '@angular/http';
import { CustomerData } from '../customer.service';
@Component({
selector: 'app-admin',
templateUrl: './admin.component.html',
styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {
customers = [];
constructor(private customerData: CustomerData) { }
ngOnInit() {
}
getData() {
this.customerData.getData()
.subscribe(
(customers: any[]) => this.customers = customers,
(error) => console.log(error)
)
}
}
service.ts
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { FormGroup } from '@angular/forms';
import { map } from 'rxjs/operators';
@Injectable()
export class CustomerData {
constructor(private http: Http) {}
getData() {
return this.http.get('link yo database')
.pipe(map(
(response: Response) => {
const data = response.json();
return data.result || data || [];
}
));
}
}