change the output value of an observable

Question

I want to retrieve a value from my API. The currently returned value is an array of objects.

[
    {
        "products_id": 793781
    },
    {
        "products_id": 794543
    }
]

I would like to use this data to transform it into a number and thus display the number of products_id returned.

I think the method is going to be .length() but I don't know where to put it.

@Input() archiveVente: [];

ngOnInit() {
    this.ArchiveVente$ = this.dataMlsService.getProducts('Archive', 'Vente');
    console.log(this.ArchiveVente$);
}


getProducts(status, typeTransac):Observable<any> {
    //   console.log(this.baux);
    //   for(this.i=0; this.i<9;this.i++ ){
    let params = new HttpParams();

    params = params.append('status', status);
    params = params.append('typeTransac', typeTransac);

    return this.apiClient.get(this.ApiUrl, { params: params});                
}


<app-compteur [archiveVente]="ArchiveVente$ | async"></app-compteur>

Try this this.ArchiveVente$ = this.dataMlsService.getProducts('Archive', 'Vente').count(product => product.products_id) ? xgrommx.github.io/rx-book/content/observable/… — Geoffrey Migliacci
– Geoffrey Migliacci, Commented Jul 7, 2020 at 8:00
ERROR TypeError: this.dataMlsService.getProducts(...).count is not a function — HCP
– HCP, Commented Jul 7, 2020 at 8:05
If you only have 1 emitted value (since it's HTTP it should be the case) use a map & get the length of your array. — Geoffrey Migliacci
– Geoffrey Migliacci, Commented Jul 7, 2020 at 8:25

Thierry Falvo · Accepted Answer · 2020-07-07 08:04:01Z

2

Simply create a second observable from the first one (archiveVente$), and with map operator, get the length of array emitted inside.

  this.productsCount$ = this.ArchiveVente$.pipe(
    map(products => products?.length)
  );

But to make this working, you should correct your getProducts return type :

getProducts(status, typeTransac):Observable<Product[]> {
  let params = new HttpParams();
  params = params.append('status', status);
  params = params.append('typeTransac', typeTransac);

  return this.apiClient.get<Product[]>(this.ApiUrl, { params: params});
}

And create the Product type.

answered Jul 7, 2020 at 8:04

Thierry Falvo

6,3202 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eliseo Over a year ago

why use htppParams to send an object?

hanan · Accepted Answer · 2020-07-07 08:12:16Z

0

When ever u think of a transform value to other map is the rxjs function. it transform ur data from one shape to other shape.

so in simple words "u have an array and u want it length instead of that array"

this.productsCount$ = this.ArchiveVente$.pipe(
    map(array => array.length)
  );

answered Jul 7, 2020 at 8:12

hanan

1,9291 gold badge16 silver badges19 bronze badges

Comments

Eliseo · Accepted Answer · 2020-07-07 08:48:52Z

0

HttpParams is NOT for pass parameters. So simply

getProducts(status, typeTransac):Observable<any> {
          const data={status:status,typeTransac:typeTransac}
          return this.apiClient.get(this.ApiUrl,data).pipe(
               map((res:any[])=>{
              //here you has the response, the array, what do you want to do with this?
              //return an object with data and count?
              return {data:res,count:res.length}
              //return only the count?
              return res.length
          }));
           
        }

edited Jul 7, 2020 at 8:48

answered Jul 7, 2020 at 8:08

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

3 Comments

HCP Over a year ago

Hello @Eliseo, the .lenght method doesn't work. The 'length' property does not exist on the 'unknown'.ts(2339) type.

Eliseo Over a year ago

declare the type of the response as ((res:any[])=>{....}, just corrected in code, thanks for the advertisment

HCP Over a year ago

Thanks for ur edit. Your solution seems to be error-free, but it still doesn't work. Observable {_isScalar: false, source: Observable, operator: MapOperator} operator: MapOperator {thisArg: undefined, project: ƒ} source: Observable {_isScalar: false, source: Observable, operator: SwitchMapOperator} _isScalar: false proto: Object

Collectives™ on Stack Overflow

change the output value of an observable

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related