Angular 6 : calculating the sum of a list (Observable)

Question

I have an array of Orders and want to create an observable that gives the calculated sum of prices. I'm using Angular 6.

import { map, reduce, isEmpty } from 'rxjs/operators';
import { Observable } from 'rxjs';

  list$: Observable<IOrder[]>;
  total$: Observable<number>;
  empty$: Observable<boolean>;


ngOnInit() {
    this.list$ = this.service.asList.asObservable(); // asList is a BehaviorSubject
    this.empty$ = this.list$.pipe(isEmpty());
    this.total$ = this.list$.pipe(
      map(order => order.price),  // <-- Property 'price' does not exist on type 'IOrder[]'
      reduce((total, price) => total + price, 0)
    );
}

'order' inside the map operator is a Order[] instead of a Order. What am I doing wrong ?

Will Taylor · Accepted Answer · 2020-11-22 21:26:34Z

7

Property 'price' does not exist on type 'IOrder[]

That means that your Observable does not return stream of elements one by one (and that's what you expect here), but whole array at once - single result is emitted. Instead of map to property, perform reduce on array right away.

It will be something like this

   this.total$ = this.list$.pipe(
      map(order => order.reduce((total, price) => total + price, 0),'
    );

edited Nov 22, 2020 at 21:26

Will Taylor

1,76911 silver badges24 bronze badges

answered Jul 1, 2018 at 18:49

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

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

Comments

navnath · Accepted Answer · 2020-11-22 16:58:02Z

0

this.total$ = this.list$.pipe(
  mergeMap((list: number[]) => from(list).pipe(
    reduce((totalPrice: number, currentPrice: number) => totalPrice + currentPrice)
  ))
);

This is another solution you can use

answered Nov 22, 2020 at 16:58

navnath

3,7241 gold badge13 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular 6 : calculating the sum of a list (Observable)

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related