3

Estaba haciendo un servicio de prueba y desde mi componente al llamar el servicio y querer agregar ".sucribe" me daba un error que el método no era un observable...

Buscando en internet logre solucionar el problema si en mi servicio agregaba algo como esto usando .map:

loadAll() {
    return this.http.get(this.url)
        .map(res => res.json());            
}

Al agregar .map desde el componente si me funciono bien ".suscribe".

Lo que no entiendo es que es lo que hace ese .map, busque en google pero no encontré info.

Según lo que me muestra el visual studio code (en ingles) es algo que toma un resultado y crea un observable... Me podrían por favor aclarar que hace este .map?

Muchas gracias

2
  • Hola, que versión de angular estas usando? el 17 abr. 2018 a las 14:45
  • Hola, estoy usando 4.0
    – Panchin
    el 17 abr. 2018 a las 14:53

2 respuestas 2

4

Te recomiendo que uses la última versión de angular, ya que http ya es obsoleto y ahora se usa httpClient.

Ejemplo:

Versión ANGULAR <= 4.2

Se usa http para consumir apis; y lo que hace .map es transformar el resultado en JSON para ser usado en tu componente con subscribe. (en esta versión de angular si o si debes usar .map)

loadAll() {
    return this.http.get(this.url)
        .map(res => res.json());            
}

Versión ANGULAR >= 4.3

Se usa httpClient para consumir apis; en esta versión ya no es necesario usar .map, ya que internamente transforma el resultado en json por default; y en tu componente haces lo mismo consumiendo con subscribe.

loadAll() {
    return this.http.get(this.url);                   
}

Te pongo la documentacion oficial como debes implementar httpclient a tu proyecto: https://angular.io/guide/http

4
  • En vez de usar negritas, usa backticks `. y en vez de 3 backticks , usa sangrado e indentacion para que el codigo se formatee adecuadamente. Un saludo
    – lois6b
    el 17 abr. 2018 a las 15:21
  • Hola, muchas gracias por la respuesta tan detallada, un cordial saludo
    – Panchin
    el 17 abr. 2018 a las 15:22
  • Hola @lois6b, gracias por los consejos. el 17 abr. 2018 a las 15:31
  • @JanPierreSanchez nada hahah para eso estamos :P
    – lois6b
    el 17 abr. 2018 a las 15:35
1

El comportamiento de .map en un observable es análogo al comportamiento de .map en un array: Transforma los elementos en lo que quieras mediante la función que le pases.

Por ejemplo, digamos que tienes una llamada http como la de tu ejemplo:

 return this.http.get(this.url)
    .map(res => res.json());

Asumo que this.http es un atributo de la clase Http, así que te advierto que su uso se considera ya anticuado.

Lo que ocurre aquí es que la llamada this.http.get(url) devuelve un Observable<Response>, es decir, tienes un objeto Response. Pero lo que a tí te interesa es la respuesta en sí, un string JSON con tus datos. Por tanto, con .map(...) realizas una transformación: cada objeto de tipo Response emitido se transforma en un objeto resultante de hacer JSON.parse(...) al texto de la respuesta.

Te muestro un ejemplo de su funcionamiento con un array:

let arrayTexto=['100','99'];

let transformaaNumeroYSumaCinco=function (texto) {
  return +texto + 5;
}

console.log(arrayTexto.map(transformaaNumeroYSumaCinco));

Ahora, como te comentaba antes, esta transformación es necesaria porque el método Http.get devuelve un Response, pero se considera anticuado porque en Angular v4.3 y posteriores existe una clase HttpClient que también tiene los métodos get, post, put... y devuelve directamente un objeto ya parseado.

1
  • Muchas gracias por tu respuesta, muy clara también tu respuesta, porque si no entiendo bien que hace algo como que me cuesta entender y recordar. Sobre lo del http client lo tendré en cuenta, nuevamente gracias
    – Panchin
    el 18 abr. 2018 a las 12:16

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.