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:
<code>@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)
}
</code>
<code>@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)
}
</code>
@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:
<code><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>
</code>
<code><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>
</code>
<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:
<code>{
"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>"
}
</code>
<code>{
"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>"
}
</code>
{
"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
<code>getClientsList(){
return this.httpClient.get(this.baseURL, {responseType: 'text'})
}
</code>
<code>getClientsList(){
return this.httpClient.get(this.baseURL, {responseType: 'text'})
}
</code>
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