CODEWITHSUNDEEP
angulartypescriptinterfacenestedrxjs
Heber Paes Fomin
Heber Paes Fomin

Reputation: 85

angular 7 rxjs nested interface how to take only the nested array?

I have this interface with nested array inside:

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

the customer interface is like this: 

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

I have this http get method on service:

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

the observable is look like this:

{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

how can I get only data (customers) part from observable using rxjs? I need some like this: on a variable customers:ICustomer[] = []; I'd like to receive only data array from observable. How can I do that? currently my ngOnInit method is like this:

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

  }

Upvotes: 0

Views: 844

Answers (3)

Heber Paes Fomin
Heber Paes Fomin

Reputation: 85

I figuered out what the error was. If you look the response above you'll see that the response object was not an array. The problem was the brackets on get method on service. Instead of <IAccounts[]> should be <IAccounts> only. So, changed the method like this:

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

It works! thanks so much for your helps.

Upvotes: 0

MCMatan
MCMatan

Reputation: 8843

You can use a Pipe, and Map nested values

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

Note: you better not use variables starting with Capital letters, as in AlvosService, that is bad practice

Upvotes: 1

Anjil Dhamala
Anjil Dhamala

Reputation: 1622

Try this:

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

Since your http call is returning an array of IAccounts, you'll need to flatten the array, map the data and zip it into an array again.

Upvotes: 0

Related Questions