How can we efficiently link data to custom objects (models) within a different class while fetching data from the server using the http.get() method in Angular CLI?

Question

How can we efficiently link data to custom objects (models) within a different class while fetching data from the server using the http.get() method in Angular CLI?

Currently in the process of developing an Angular-Cli application that involves multiple models with relational data tables. When fetching data from the server, I need to map this data to corresponding model objects.

I've experimented with creating a single model to represent the database view by merging two different models. However, I found this approach cumbersome and somewhat absurd for my application.

export class Employee{
id:number;
fullName:string;
department: Department;
}

export class Department{
deptId:number;
name:string;
}

#within my service
<-- department table | json -->
[
{deptId: 1, name: "IT"},
{deptId: 2, name: "HR"},
{deptId: 3, name: "Finance"}
]

<-- employee table | json -->
[
{id: 1, fullName: "George W Bush", deptId:1},
{id: 2, fullName: "Barack Obama", deptId:2},
{id: 3, fullName: "Donald Trump", deptId:3},
]

<-- data retrieved from view | json -->
[
{id: 1, fullName: "George W Bush", deptId:1, name: "IT"},
{id: 2, fullName: "Barack Obama", deptId:2, name: "HR"},
{id: 3, fullName: "Donald Trump", deptId:3, name: "Finance"},
]


employees: Employee[]
getData():Observable<Employee[]>{
    return this.http.get<Employee[]>(this.stringUrl).subscribe(data=>{
    employees = data;
});
}

<ul *ngFor="let employee of employees">

    <li>employee.fullName}}
         <ul>
            <li>{{employee.department}}</li>
         </ul>
    </li>

</ul>

1. George W Bush
   a.IT
2. Barack Obama
   b.HR
3. Donald Trump
   c.Finance

angular typescript http-get

Answer 1

Answer №1

After considering the comments, my suggestion would be to enhance the backend to retrieve Employee objects already linked with the department name using an SQL JOIN. Alternatively, you can implement the following workaround:

Component Template

In this approach, we are utilizing the template to manage the subscription to the observable by employing an async pipe instead of subscribing within the component itself.

<ul *ngFor="let employee of employees$ | async">
  <li>
    {{employee.fullName}}
    <ul>
      <li>{{employee.department.name}}</li>
    </ul>
  </li>
</ul>

Component

export class AppComponent {
  employees$: Observable<Employee[]>;

  constructor(private readonly employeeService: EmployeeService) {
    this.employees$ = this.employeeService.getData();
  }
}

Service

This service ensures that departments are fetched first before creating a map to pass to the getEmployees() method. By leveraging rxjs's switchmap, the getData() function will return the desired Employee[].

interface EmployeeResponse {
  id: number;
  fullName: string;
  deptId: number;
}

export class Employee {
  id: number;
  fullName: string;
  department: Department;
}

export class Department {
  deptId: number;
  name: string;
}

const employeesUrl = 'http://localhost:4201/employees';
const departmentsUrl = 'http://localhost:4201/departments';

@Injectable({
  providedIn: 'root',
})
export class EmployeeService {
  constructor(private readonly http: HttpClient) {}

  getData(): Observable<Employee[]> {
    return this.getDepartments().pipe(
      switchMap(departmentsMap => this.getEmployees(departmentsMap)),
    );
  }

  getDepartments(): Observable<Map<number, Department>> {
    return this.http
      .get<Department[]>(departmentsUrl)
      .pipe(
        map(
          departments =>
            new Map<number, Department>(
              departments.map(department => [department.deptId, department]),
            ),
        ),
      );
  }

  getEmployees(departmentsMap) {
    return this.http.get<EmployeeResponse[]>(employeesUrl).pipe(
      map(employeesResponse => {
        return employeesResponse.map(employeeResponse => {
          const employee = new Employee();
          employee.id = employeeResponse.id;
          employee.fullName = employeeResponse.fullName;
          employee.department = departmentsMap.get(employeeResponse.deptId);
          return employee;
        });
      }),
    );
  }
}

Answer 2

After considering the comments, my suggestion would be to enhance the backend to retrieve Employee objects already linked with the department name using an SQL JOIN. Alternatively, you can implement the following workaround:

Component Template

In this approach, we are utilizing the template to manage the subscription to the observable by employing an async pipe instead of subscribing within the component itself.

<ul *ngFor="let employee of employees$ | async">
  <li>
    {{employee.fullName}}
    <ul>
      <li>{{employee.department.name}}</li>
    </ul>
  </li>
</ul>

Component

export class AppComponent {
  employees$: Observable<Employee[]>;

  constructor(private readonly employeeService: EmployeeService) {
    this.employees$ = this.employeeService.getData();
  }
}

Service

This service ensures that departments are fetched first before creating a map to pass to the getEmployees() method. By leveraging rxjs's switchmap, the getData() function will return the desired Employee[].

interface EmployeeResponse {
  id: number;
  fullName: string;
  deptId: number;
}

export class Employee {
  id: number;
  fullName: string;
  department: Department;
}

export class Department {
  deptId: number;
  name: string;
}

const employeesUrl = 'http://localhost:4201/employees';
const departmentsUrl = 'http://localhost:4201/departments';

@Injectable({
  providedIn: 'root',
})
export class EmployeeService {
  constructor(private readonly http: HttpClient) {}

  getData(): Observable<Employee[]> {
    return this.getDepartments().pipe(
      switchMap(departmentsMap => this.getEmployees(departmentsMap)),
    );
  }

  getDepartments(): Observable<Map<number, Department>> {
    return this.http
      .get<Department[]>(departmentsUrl)
      .pipe(
        map(
          departments =>
            new Map<number, Department>(
              departments.map(department => [department.deptId, department]),
            ),
        ),
      );
  }

  getEmployees(departmentsMap) {
    return this.http.get<EmployeeResponse[]>(employeesUrl).pipe(
      map(employeesResponse => {
        return employeesResponse.map(employeeResponse => {
          const employee = new Employee();
          employee.id = employeeResponse.id;
          employee.fullName = employeeResponse.fullName;
          employee.department = departmentsMap.get(employeeResponse.deptId);
          return employee;
        });
      }),
    );
  }
}

How can we efficiently link data to custom objects (models) within a different class while fetching data from the server using the http.get() method in Angular CLI?

Answer №1

Similar questions

Accordion symbol for adding or subtracting

Mapping JSON to interface in Angular 7: A step-by-step guide

In Rxjs, Subscribe now emits individual items one at a time instead of emitting a list all at once

How can I retrieve image files from locations outside the Angular 5 app or assets directory?

Error encountered with react-query and UseQueryResult due to incorrect data type

Following a docker run command, Docker undergoes an automatic shutdown process

Having trouble adding npm package to Angular project due to npm error ERESOLVE?

TSLint is encountering the error code TS2459: The module "@azure/core-tracing" claims to have a local declaration of "Span" but does not export it, along with additional errors

In Angular, what is the process of dynamically updating an input label?

Executing a function within the same file is referred to as intra-file testing

Ways to activate auto completion without using a string

What is the best way to dynamically update styleUrls or style properties in Angular?

Angular has got us covered with its latest feature - combining Async Await with an EventListener

Creating a unified environment variable for Angular 2 and ASP.NET Core MVC: A comprehensive guide

Guide to incorporating @types/module with the corresponding npm module that has type definitions available

Parent component interacting with child component

Commitments, the Angular2 framework, and boundary

Is it possible to dynamically create an interface using an enum in TypeScript through programmatically means?

Creating adaptable rows and columns with Angular Material's data table feature

Scrolling the mouse wheel on Angular 2 Typescript Highcharts Highmap