Angular Observable: modify data before resolve

Question

I tried to transform data before resolve by such way, but subscriber gets non-transformed data.

@Injectable()
export class OrderService {
    getAll(): Observable< Array<Order> > {
        let url = 'http://fakeapi.com';
        return this.http.get( url )
          .pipe(
            tap( (data: any) => {
                /*
                * MAKE DATA TRANSFORMATIONS HERE
                */
            }),
            catchError( (err: any, caught: Observable<{}>) => {
              console.log('error while GET : ' + url);
              console.warn(err);
              return caught;
            })
          );
    }
}

here is a subscriber:

this._orderService.getAll().subscribe( data => {
  this.orders = data;
  console.log('\nplanning-overview-page : _orderService.getAll : data ', data);
});

you can use .map()

CozyAzure
– CozyAzure

2017-11-17 14:21:31 +00:00
Commented Nov 17, 2017 at 14:21 — CozyAzure
– CozyAzure, Commented Nov 17, 2017 at 14:21

bryan60 · Accepted Answer · 2017-11-17 14:23:34Z

7

map is the operator for transforming a value in an observable stream, and you have to make sure it returns a value.

map(data => {
    // do your transformations
    return data;
});

answered Nov 17, 2017 at 14:23

bryan60

29.5k5 gold badges56 silver badges71 bronze badges

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

2 Comments

meteor Over a year ago

It works, but there is a note: after I added map() the were arror "Property 'map' does not exist on type 'Observable<Object>' ". There is a solution of the error stackoverflow.com/a/41014638/7455192

bryan60 Over a year ago

yea, it needs to be imported like all the other operators, figured you knew since you were using tap already

Mohammad Dayyan · Accepted Answer · 2025-04-14 07:39:12Z

0

If you want change data, use pipe, map and code as following:

import { map } from 'rxjs/operators';

getAll(): Observable<Order[]>  {
  return this.service.get<Order[]>("https://url")
    .pipe(
      map(data => {
        /*
        * CHANGE DATA HERE
        */
        return data;
      })
    );
}

answered Apr 14 at 7:39

Mohammad Dayyan

22.5k44 gold badges174 silver badges242 bronze badges

Collectives™ on Stack Overflow

Angular Observable: modify data before resolve

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related