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?
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)
);
}
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.
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)
);
}