I'm currently in the process of developing a full stack application using Spring and Angular.
After successfully setting up my REST APIs which are functioning properly on port 8080, I encountered an issue when trying to access them from my frontend (Angular service). The page loads without any errors, but no data is being displayed. Cross-origin support has been added to the interface in Spring, yet the retrieved data is coming back as undefined (see attached images).
Customer-List Component (typescript)
import { Component, OnInit } from '@angular/core';
import { Customer } from 'src/app/common/customer';
import { CustomerService } from 'src/app/services/customer.service';
@Component({
selector: 'app-customer-list',
templateUrl: './customer-list.component.html',
styleUrls: ['./customer-list.component.css']
})
export class CustomerListComponent implements OnInit {
customers: Customer[];
constructor(private customerService: CustomerService) { }
ngOnInit() {
this.listCustomers();
}
listCustomers() {
this.customerService.getCustomerList().subscribe(
data => {
this.customers = data;
console.log(`Data retrieved: ${this.customers}`);
}
);
}
}
Customer Component (html)
<p>
this works!
</p>
<p *ngFor = "let tempCust of customers">
hello
{{ tempCust.name }}
</p>
Customer Service
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Customer } from '../common/customer';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class CustomerService {
private baseUrl = 'http://localhost:8080/api/customerDetails';
constructor(private httpClient: HttpClient) { }
getCustomerList(): Observable<Customer[]> {
return this.httpClient.get<GetResponse>(this.baseUrl).pipe(
map(response => response._embedded.customers)
)
}
}
interface GetResponse{
_embedded : {
customers: Customer[];
}
}
Port 4200 Screenshot of page on Port 4200
Port 8080 Screenshot of page on Port 8080
Any insights into where I might be making a mistake would be greatly appreciated.
Thank you in advance!