1

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!

2 respuestas 2

0

Mira la definicion del callback de forEach:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

En particular la parte que dice:

Return value undefined.

O sea, cuando tu haces:

return this.http.get( ... )

Ese valor retornado no lo utiliza nadie.

Lo que podrias hacer entonces es concatenar todos los observables que resultan de tu callback, y retornar esa concatenacion:

Ejemplo del operador concat: https://jsfiddle.net/btroncone/rxwnr3hh/

const sourceOne = Rx.Observable.of(1,2,3);
const sourceTwo = Rx.Observable.of(4,5,6);
const example = sourceOne.concat(sourceTwo);
//salida: 1,2,3,4,5,6
const subscribe = example.subscribe(val => alert('Ejemplo concat:' + val));

En tu código sería algo más o menos así:

songsList => {
    var concatObs = null;
    //Un ciclo para recorrer las diez canciones
    songsList.forEach(item => {
        //En el ciclo haría un llamado al servicio de youtube, pasando los parametros
        var nuevoItem = this.http.get(urlBase + songsList[item].name + " " + songsList[item].artist + urlFin);

        if (concatObs) {
            concatObs = concatObs.concat(nuevoItem);
        } else {
            concatObs = nuevoItem;
        }
    });

    return concatObs;
});
0

Necesitas usar forkJoin para esperar el resultado de tus x anteriores peticiones. Esta función acepta un arreglo de observables y emite los resultados en el mismo orden en el que los parámetros fueron escritos. Se comporta exactamente igual que un Promise.all esperando por todos los resultados y emitiendo un error en caso que alguna petición no se pueda completar.

Como nota adicional en tu código tienes esto

.mergeMap(songsList => {
        songsList.forEach(item => {
            return //...

Que es un error ya que mergeMap requiere un observable y el forEach opera en un arreglo pero no devuelve nada por lo que el return no tiene ningun efecto. En su lugar necesitas usar map para convertir el arreglo de canciones en un arreglo de observables con todas las peticiones que es el formato que forkJoin si puede manejar. Tu código quedaría así.

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 transformar las diez canciones en peticiones
      return forkJoin(songsList.map(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;
    });
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.