Estoy haciendo algunos ejercicios con Angular2+, no tengo mucho experiencia con esta versión por lo que no se como lograr la idea que tengo.
Quiero invocar un servicio que retorne las 10 canciones mas populares del momento, cuando llegue esa respuesta quisiera consumir el API de youtube para obtener la datos de cada una de las canciones, es decir, quiero hacer un ciclo que invoque al API de youtube tantas veces como resultados traiga el primer servicio.
A continuación un estracto de lo que he intentado y que evidentemente no funciona.
songs: Song[];
...
getItunesList(): Observable < Song[] > {
let urlBase = "https://www.googleapis.com/youtube/v3/search?part= id,snippet&maxResults=1&q=";
let youtubeKey = "&key=myKey";
return this.http
.get(`http://www.mocky.io/v2/59ebfde03100001b02d24da4`)
.map(response => response.json().songsList as Song[])
.mergeMap(songsList => {
//Un ciclo para recorrer las diez canciones
songsList.forEach(item => {
//En el ciclo haría un llamado al servicio de youtube, pasando los parametros
return this.http.get(urlBase + songsList[item].name + " " + songsList[item].artist + urlFin);
})
}).map(youTubeData => {
//Ordenar resspuesta de youtube en el arreglo de objetos songs y finalmente devolver un solo arreglo con toda la información
song.url = 'https://www.youtube.com/watch?v=' + youTubeData.items[0].id.videoId;
song.thumbnail = youTubeData.items[0].snippet.thumbnails.default.url;
return song;
});
}
Quisiera por favor orientación sobre como lograr el ciclo de invocaciones HTTP dentro de una respuesta, gracias!