I am building a RESTful API with a Spring Boot Backend & Angular frontend.
Utilizing a service meant to return a client list as shown below:
@Injectable({
providedIn: 'root'
})
export class ClientService {
private baseURL = "http://localhost:9090/clients";
constructor(private httpClient: HttpClient) { }
getClientsList(): Observable<Client[]>{
return this.httpClient.get<Client[]>(this.baseURL)
}
As well as the list component:
<h2>Employee List</h2>
<table class = "table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Email</th>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let client of clients">
<td> {{ client.id}}</td>
<td> {{ client.email}}</td>
<td> {{ client.firstName }}</td>
<td> {{ client.lastName}}</td>
<td> {{ client.phoneNumber}}</td>
</tr>
</tbody>
</table>
But am receiving a HttpErrorResponse:
{
"error": {},
"text": "<table>n <c:forEach items="${Client}" var="c" varStatus="vStatus">n <tr>n <td>${c.id}</td> nttt<td>${c.email}</td>nttt<td>${c.first_name}</td>nttt<td>${c.last_name}</td>nttt<td>${c.phone_number}</td>n <td><input type="text" id="${pStatus}" name="${pStatus}"></td>n </tr>n </c:forEach>n</table>"
}
I’ve tried multiple other solutions including changing to
getClientsList(){
return this.httpClient.get(this.baseURL, {responseType: 'text'})
}
but still receiving the same error. Is there something I’m missing? The console notifies me of an error with the syntax of the client list component but in my research I’m seeing multiple people say that the error has to do with the parsing of the JSON