I am new to angular and struggling with converting a JSON object from the server into a custom datatype to render in HTML using ngFor. Any help would be appreciated as I have tried multiple approaches without success.
Apologies for the simple HTML page, I am focusing on functionality and backend connections before working on design.
Below is the code snippet and attached screenshots for reference.
Employee.Component.html
<p>Inside Employee Component.</p>
<button type="submit" class="btn btn-login float-center" (click)="getAllEmployees1()">getAllEmployees</button>
<div>
<h2>Employee List</h2>
{{ employees }}
</div>
employee.component.ts file
employees: any;
constructor(private service: EmployeeServiceService){
}
ngOnInit(){
}
public getAllEmployees1(){
this.service.getAllEmployees().subscribe((data)=>{
this.employees = data;
console.log("Response: "+ this.employees);
},
(error) =>{
console.error('Error fetching employees: ', error);
}
);
}
EmployeeService file:
@Injectable({
providedIn: 'root'
})
export class EmployeeServiceService {
constructor(private http:HttpClient) { }
getAllEmployees(){
console.log("Inside get ALL Employees Method.");
return this.http.get("https://localhost:9090/employee/getAllEmployees",{responseType:'text' as 'json'});
}
Employee class type:
export class AddEmployee{
firstName: any;
lastName: any;
address:any;
project:any
ssn:any;
joinDate:any;
status:any
constructor(
firstName: string,
lastName: string,
address:string,
project:string,
ssn:number,
joinDate:Date,
status:number
){}
}
I am trying to convert the server's JSON data to AddEmployee type for displaying in a tabular format using ngFor. Angular is showing errors that the data is in Object Format and ngFor can only be used on observables and iterators. Attached is an image showing the object returned from the server when I click on the getAllEmployees button.
Error Page: https://i.sstatic.net/n6IAK.png