Modify array in observable with rxjs, return whole object

Question

I have observable like this:

currentPage: 1
items: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
pageSize: 10
totalItems: 6
totalPages: 1

I'm trying to modify every element in items array, and then return a whole object.

   getAllGifts(): Observable<PagedListDTO<GiftIdeaDTO>> {
    return this.http.get<PagedListDTO<GiftIdeaDTO>>(this.urlAPI + '/GiftIdeas/GetAll').
      pipe(
        map(x => x.items.map
          (y => ({ ...y, imageContentB64: y.imageContentB64 + 'Bob' })))
        ,
        tap(console.log)
      );
  }

but i only get a modified array of items, no currentPage property, page Size etc.

How can i modify items array and return whole object?

Instead of map(x => x.items.map please try map(x => ({...x, items: x.items.map......}) and share feedback/observation. — jsN00b
– jsN00b, Commented Jan 23, 2022 at 14:05

Barremian · Accepted Answer · 2022-01-23 14:42:33Z

2

You seem to be already familiar with the usage of spread syntax (...). You could also use it for the outer object before applying the Array#map to the items property.

Try the following

getAllGifts(): Observable<PagedListDTO<GiftIdeaDTO>> {
  return this.http
    .get<PagedListDTO<GiftIdeaDTO>>(this.urlAPI + '/GiftIdeas/GetAll')
    .pipe(
      map(ideas => ({
        ...ideas,                          // retain properties of the outer object
        items: ideas.items.map(item => ({  // adjust the `items` property
          ...item, 
          imageContentB64: item.imageContentB64 + 'Bob' 
        }))
      })),
      tap(console.log)
    );
}

answered Jan 23, 2022 at 14:42

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

Comments

jsN00b · Accepted Answer · 2022-01-23 14:17:12Z

1

The map(x => only accounts for x.items and misses the rest of the props.

This should fix it:

   getAllGifts(): Observable<PagedListDTO<GiftIdeaDTO>> {
    return this.http.get<PagedListDTO<GiftIdeaDTO>>(this.urlAPI + '/GiftIdeas/GetAll').
      pipe(
        map(x => ({...x, items: x.items.map
          (y => ({ ...y, imageContentB64: y.imageContentB64 + 'Bob' })))
        }),
        tap(console.log)
      );
  }

In the above code, x is mapped to include all props and then items is updated using x.items.map.

answered Jan 23, 2022 at 14:17

jsN00b

3,7032 gold badges10 silver badges22 bronze badges

Comments

omidfarzadian · Accepted Answer · 2022-01-23 14:24:39Z

0

You are not returing them, use this:

getAllGifts(): Observable<PagedListDTO<GiftIdeaDTO>> {
return this.http.get<PagedListDTO<GiftIdeaDTO>>(this.urlAPI + '/GiftIdeas/GetAll').
    pipe(
        map(x => {
            return {
                ...x,
                items: x.items.map(y => ({ ...y, imageContentB64: y.imageContentB64 + 'Bob' }))
            }
        })
    )
    ,tap(console.log)
    );
}

answered Jan 23, 2022 at 14:24

omidfarzadian

1063 bronze badges

Collectives™ on Stack Overflow

Modify array in observable with rxjs, return whole object

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related