Tengo observable como este:
currentPage: 1 items: (6) [{…}, {…}, {…}, {…}, {…}, {…}] pageSize: 10 totalItems: 6 totalPages: 1Estoy tratando de modificar cada elemento en la matriz de elementos y luego devolver un objeto completo.
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) ); }pero solo obtengo una matriz modificada de elementos, sin propiedad de página actual, tamaño de página, etc.
¿Cómo puedo modificar la matriz de elementos y devolver el objeto completo?
Parece que ya está familiarizado con el uso de la sintaxis extendida ( ... ) . También puede usarlo para el objeto externo antes de aplicar Array#map a la propiedad de items .
Prueba lo siguiente
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) ); }El map(x => solo tiene en cuenta x.items . elementos y pierde el resto de los props .
Esto debería arreglarlo:
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) ); } En el código anterior, x se mapea para incluir todos los accesorios y luego items se actualizan usando x.items.map .
No los está devolviendo, use esto:
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) ); }