Получить данные из Observable в Angular 7

Я довольно новичок в Angular. Попытка использовать данные из конечной точки GET REST следующим образом:

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

Он имеет два списка сотрудников и адресов. В angular я создал классы следующим образом:

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;
}

}

Попытка построить класс EmployeeDetail следующим образом:

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.info(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;
      })
   );

Получение следующего исключения

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)

Может ли кто-нибудь помочь мне создать объект EmployeeDetail. Спасибо

Это data.employees не data.employee.

TheUnreal 29.05.2019 14:02

и data.addresses не data.address

Fateh Mohamed 29.05.2019 14:10

Пожалуйста, используйте отладчик, прежде чем задавать вопросы. Добавление простого debugger; и взгляд на то, что происходит, очень поможет вам в будущем.

Reactgular 29.05.2019 14:11

Большое спасибо, ребята :) .. это решило проблему. Просто вопрос. даже использование data.employee должно вызывать геттера, верно? Который вернет data.employees

Rehan 29.05.2019 14:12

@Reactgular не нужно debugger, достаточно console.info

user4676340 29.05.2019 14:16

@Maryannah правда, но если бы мы могли привлечь больше людей к использованию debugger;, качество вопросов здесь повысилось бы. ;)

Reactgular 29.05.2019 14:16

@Reactgular не могу не согласиться! Но грядет отладка шаблонов, так что у нас все получилось, и это хорошо :)

user4676340 29.05.2019 14:25
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
7
696
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам действительно не нужно вводить всю эту избыточную логику в метод getData().

Как насчет упрощения вашей реализации следующим образом:

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');
  }

}

Мы просто указываем T метода get в HttpClient to EmployeeDetail и возвращаем то, что возвращает этот метод. Это вернет Observable обертку значения типа EmployeeDetail.


Here's a Working Sample StackBlitz for your ref.

Другие вопросы по теме