In my Angular 7 application, I have two object classes filled with data - employee and company (data retrieved through a web API from a database).
The Employee class has fields - emp_id, name, surname, and a company object.
The Company class has - c_id, company_name, phone.
I am able to display the emp_id, name, and surname of an employee in a table using "emp_id", "name", and "surname" respectively. However, when trying to display the employee's company, it shows "[object Object]" instead of the desired company_name.
When viewing the data from the web API in a program like Postman, the company object is correctly displayed inside the employee object.
I have attempted various combinations to access the company name - company.company_name, company{company_name}, company(company_name), but none of these seem to work.
Below are my Angular classes:
export interface Employee
{
emp_id: number;
name: string;
surname: string;
company: Company;
}
export interface Company
{
c_id: number;
company_name: string;
phone: string;
}
The objects are populated using http.get and saved in arrays:
public apartments: any[];
public houses: any[];
getEmployees(): Observable<Employee[]>
{
return this.http.get<Employee[]>('http://localhost:60962/api/employees');
}
getCompanies(): Observable<Company[]>
{
return this.http.get<Company[]>('http://localhost:60962/api/companies');
}
Subscribed on initialization:
ngOnInit()
{
this.getEmployees()
.subscribe(data => this.apartments = data);
this.getCompanies()
.subscribe(data => this.houses = data);
}