Get data from Observable in Angular 7

Question

I am fairly new to Angular. Trying to consume data as follows from a GET REST Endpoint-

{"employees":[{"empId":"1","name":"emp1","designation":"manager","salary":3000.0},{"empId":"2","name":"emp2","designation":"developer","salary":3000.0}],"addresses":[{"city":"London"},{"city":"Belgium"}]}

It has two lists employees and addresses. In angular i have created the classes as follows-

export class Employee {

  constructor(

  ) { }
}

export class Address {

  constructor(

  ) { }
}



export class EmployeeDetail {
  public employees: Employee[];
  public addresses: Address[];

  constructor( ) { }
  public get employee(): Employee[] {
    return this.employees;
  }

  public get address(): Address[] {
    return this.addresses;
  }

  public set address(addresses: Address[]){
    this.addresses = addresses;
}

}

Trying to construct the EmployeeDetail class as follows-

getData() {
    return this.httpClient.get<EmployeeDetail>('http://localhost:8080/employees')
    .pipe(
      map(data => {
        const employeeList: Employee[] = [];
        const addressList: Address[] = [];
        var employeeDetail = new EmployeeDetail();
        const newList1 : Employee[] = data.employee;
        const newList2 : Address[] = data.address;
        console.log(newList1);
        newList1.forEach(item => 
          employeeList.push(Object.assign(new Employee(), item)));
        newList2.forEach(item => 
          newList.push(Object.assign(new Address(), item)));  
          employeeDetail.employee = employeeList;
          employeeDetail.address = addressList;


        return employeeDetail;
      })
   );

Getting following exception

TypeError: Cannot read property 'forEach' of undefined
    at MapSubscriber.project (http-client.service.ts:119)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)

Could some one please help me create the EmployeeDetail object. Thanks

Please use a debugger before you post questions. Adding a simple debugger; and taking a look at what is happening will help you a lot in the future. — Reactgular
– Reactgular, Commented May 29, 2019 at 12:11
@Maryannah true, but if we could get more people to use debugger; the quality of questions here would go up. ;) — Reactgular
– Reactgular, Commented May 29, 2019 at 12:16
@Reactgular can't agree more ! But template debugging is coming so we got that going, which is nice :) — user4676340
– user4676340, Commented May 29, 2019 at 12:25

SiddAjmera · Accepted Answer · 2019-05-29 13:08:57Z

You don't really need to put in all that redundant logic in the getData() method.

How about simplifying your implementation like this:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export class Employee {
  empId: string;
  name: string;
  designation: string;
  salary: number;
}

export class Address {
  city: string;
}

export class EmployeeDetail {
  employees: Employee[];
  addresses: Address[];
}

@Injectable()
export class EmployeeService {

  constructor(private http: HttpClient) {}

  getEmployeeData(): Observable < EmployeeDetail > {
    return this.http.get < EmployeeDetail > ('/assets/employees.json');
  }

}

We just specify the T of the get method on the HttpClient to EmployeeDetail and return whatever this method returns. This would return an Observable wrapping a value of type EmployeeDetail.

Here's a Working Sample StackBlitz for your ref.

Collectives™ on Stack Overflow

Get data from Observable in Angular 7

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related