How to map data correctly before subscription?

Question

I have following function:

    this.localStorage.getItem('user').subscribe(user => {
      this.user = user;
      this.authSrv.getOrders(this.user.einsender).pipe(map(orders => {
        map(order => { order["etz"] = "23"; return order})
        return orders;
      })).subscribe(orders => {
        this.orders = orders;
        this.completeOrders = orders;
        console.log(orders);
        this.waitUntilContentLoaded = true;
      })
    })

The result without the map is:

[{id: 1, etz: "21"}]

With the map from above I try to enter the array, then the order and in the order I try to change the etz property but somehow nothing changes. Can someone look over? I appreciate any help!

Answer 1

I see multiple issues here.

1. Try to avoid nested subscriptions. Instead you could use one of the RxJS higher order mapping operators like switchMap. You could find differences b/n different higher order mapping operators here and here.

2. To adjust each element of the array you need to use Array#map method in addition to the RxJS map operator.

3. You could use JS spread operator to adjust some of the properties of the object and retain other properties.

Try the following

this.localStorage.getItem('user').pipe(
  switchMap(user => {
    this.user = user;
    return this.authSrv.getOrders(this.user.einsender).pipe(
      map(orders => orders.map(order => ({...order, order['etz']: '23'})))
    });
  })
).subscribe(
  orders => {
    this.orders = orders;
    this.completeOrders = orders;
    console.log(orders);
    this.waitUntilContentLoaded = true;
  },
  error => {
    // good practice to handle HTTP errors
  }
);

Answer 2

map is an operator that goes in a pipe like this:

someObs$.pipe(map(arg => { return 'something'}));

You've done this:

someObs$.pipe(map(arg => { 
    map(arg => { return 'something' })     // this line here does nothing
    return arg; 
}));

It doesn't make any sense to use map inside the function you've given to map