Modify array in observable with rxjs, return whole object

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?


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.