How to modify data that is fetched from an observable? - angular7

Question

I want to fetch data from an api(Movie lists with various information). I'm fairly new to observables, and keep getting confused. So the thing that I want to achieve is concatenate the base path with poster path (this I get from the api) and retrieve the poster to display in the view.
I'm able to fetch name of the movies from the api but I'm unable to concatenate the base URL to poster path. Any help or a direction on how to work with observables is really appreciated.
Service that I'm using to fetch data
export class MoviesService {
private _url: string = 'https://api.themoviedb.org/3/movie/popular?api_key=<<API KEY>>&language=en-US&page=2'
constructor(private http: HttpClient) { }
getmovies(): Observable<IMovie[]> {
return this.http.get<IMovie[]>(this._url);
}
}
I want to understand how to manipulate data that is fetched via an observable.

Answer 1

From what I understand, you are looking for rxjs operators, specifically for "Transforming" operators, found at:
https://www.learnrxjs.io/operators/transformation/
With that you can do things with the data your Observable emits, whenever it does.
Assuming the structure of your IMovie something like the following should get you on the right track.
getmovies(): Observable<{connectedURL: string}[]> {
return this.http.get<IMovie[]>(this._url).pipe(
map( (movies:IMovie[]) => {
result = [];
movies.forEach( (movie) => {
result.push(movie.getBaseURL() + movie.getPosterURL());
}
return result;
})
);
}
All this does is taking your array of Movies and create a new Array with your connected URLs.
So your getMovies() returns your modified list.
Of course your could do the map()-Operator somewhere else in your logic or even create some other kind of object with the info of your IMovie[].
I hope this is of any help to do.
Starting out with Observables and Operators is quite a big thing, so you should definetly check the link above out.
Feel free to correct me :)

Answer 2

Concat
emit the emissions from two or more Observables without interleaving them1
The Concat operator concatenates the output of multiple Observables so that they act like a single Observable, with all of the items emitted by the first Observable being emitted before any of the items emitted by the second Observable (and so forth, if there are more than two).
Concat waits to subscribe to each additional Observable that you pass to it until the previous Observable completes. Note that because of this, if you try to concatenate a “hot” Observable, that is, one that begins emitting items immediately and before it is subscribed to, Concat will not see, and therefore will not emit, any items that Observable emits before all previous Observables complete and Concat subscribes to the “hot” Observable.
RxJs Examples for Concat is:
Example 1: Basic concat usage with three observables
// RxJS v6+
import { of, concat } from 'rxjs';
concat(
of(1, 2, 3),
// subscribed after first completes
of(4, 5, 6),
// subscribed after second completes
of(7, 8, 9)
)
// log: 1, 2, 3, 4, 5, 6, 7, 8, 9
.subscribe(console.log);
Example 2: concat with delayed observable
// RxJS v6+
import { of, concat } from 'rxjs';
import { delay } from 'rxjs/operators';
concat(
of(1, 2, 3).pipe(delay(3000)),
// after 3s, the first observable will complete and subsquent observable subscribed with values emitted
of(4, 5, 6)
)
// log: 1,2,3,4,5,6
.subscribe(console.log);