угловой 7 rxjs вложенный интерфейс, как взять только вложенный массив?

Question

У меня есть этот интерфейс с вложенным массивом внутри:

import { IEmitente } from './ICustomer';

export interface IAccounts {
        current_page: number;
        data: ICustomer[];
        first_page_url: string;
        from: number;
        last_page: number;
        last_page_url: string;
        next_page_url: string;
        path: string;
        per_page: number;
        prev_page_url: string;
        to: number;
        total: number;
}

пользовательский интерфейс выглядит так:

export interface ICustomer {
id: number;
name: string;
federalId: string;
firstBuy: date;
balance: number;
}

У меня есть этот http get метод на службе:

getContas(identific,search,page?): Observable<IAccounts[]> {
    return this.httpClient.get<IAccounts[]>(`${this.BASE_URL}/getContas?identific=${identific}&search=${search}&page=${page}`)
  }

наблюдаемое выглядит следующим образом:

{current_page: 1, data: Array(15), first_page_url: "https://web.gruposol.com.br/endpoint/api/getContas?page=1", from: 1, last_page: 19, …}
current_page: 1
data: (15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
first_page_url: "https://address/api/getContas?page=1"
from: 1
last_page: 19
last_page_url: "https://address/api/getContas?page=19"
next_page_url: "https://address/api/getContas?page=2"
path: "https://address/api/getContas"
per_page: 15
prev_page_url: null
to: 15
total: 275
__proto__: Object

как я могу получить только часть данных (клиентов) из наблюдаемого, используя rxjs?Мне нужно что-то вроде этого: для переменной customers:ICustomer[] = []; я бы хотел получать только массив данных из наблюдаемой.Как я могу это сделать?в настоящее время мой метод ngOnInit выглядит так:

  ngOnInit() {
     this.AlvosService.getContas(this.identific, this.search)
       .subscribe((response) => { console.log(response)} ),
        (error) => { console.log(error); };

  }

Answer 1

Вы можете использовать Труба и Карта вложенные значения

this.AlvosService.getContas(this.identific, this.search)
          .pipe(
            switchMap((accounts) => accounts.map((account) => account.data))
          )
          .subscribe((customers) => { console.log(customers) }),
          (error) => { console.log(error); }

Примечание: лучше не использовать переменные, начинающиеся с заглавных букв, так какв AlvosService , что является плохой практикой

Answer 2

Я понял, в чем была ошибка.Если вы посмотрите ответ выше, вы увидите, что объект ответа не был массивом.Проблема заключалась в скобках для метода get на сервисе.Вместо <IAccounts[]> должно быть только <IAccounts>.Итак, изменили метод следующим образом:

getContas(identific,search,page?): Observable<IAccounts> {
    return this.httpClient.get<IAccounts>(`${this.BASE_URL}/getContas?identific=${identific}&search=${search}&page=${page}`)
  }

Работает!Большое спасибо за вашу помощь.

Answer 3

Попробуйте это:

this.AlvosService.getContas(this.identific, this.search)
          .pipe(
            mergeMap(accounts => accounts),
            map((account: IAccounts) => account.data),
            toArray()
          )
          .subscribe((customers) => { console.log(customers)} ),
           (error) => { console.log(error); };

Поскольку ваш http-вызов возвращает массив IAccounts, вам нужно flatten массив, map данные и zip снова в массив.