Formateando respuestas del servidor con el operador map()

Cursos Empresas Blog Live Conf Precios

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

73
Conclusión ¿Qué aprendimos en el curso?
01:20 min
74
Reto final del curso - realiza un nuevo modulo de PlatziSquare de acuerdo con las historias de usuario
01:25 min

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Formateando respuestas del servidor con el operador map()

Resumen

El operador map nos permite darle formato a la respuesta que nos llega cuando usamos el operador get.

Comentarios

Carlos Enrique Ramírez Flores

student

Hoy 02 de junio 2018. código para que funcione map en angular5

como importo **map **de rxjs

import { map } from 'rxjs/operators'

como se usa

return this.http.get(this.API_ENDPINT+'/.json')
					.pipe(map((resultado)=>{
							const data =  resultado.json().lugares
							return data
						})
					)

aquí el código completo

import { Injectable } from "@angular/core"
import { AngularFireDatabase } from'angularfire2/database';
import {Http, Headers} from "@angular/http"
import { map } from 'rxjs/operators'
@Injectable()
export class LugaresService{
	API_ENDPINT = 'https://platzisquare-18656.firebaseio.com'
	lugares:any = []
	constructor(private afDB: AngularFireDatabase, private http: Http) {
	}
	public getLugares(){
		//return  this.afDB.list('lugares')
		return this.http.get(this.API_ENDPINT+'/.json')
					.pipe(map((resultado)=>{
							const data =  resultado.json().lugares
							return data
						})
					)
	}
	public buscarLugar(id){
		return this.lugares.filter((lugar) => { return lugar.id == id})[0] || null
	}
	public guardarLugar(lugar){
		//this.afDB.database.ref('lugares/'+lugar.id).set(lugar)
		const headers = new Headers({'Content-Type':'application/json'})
		return this.http.post(this.API_ENDPINT+'/lugares.json',lugar,{headers:headers}).subscribe()
	}
	public editarLugar(lugar){
		this.afDB.database.ref('lugares/'+lugar.id).set(lugar)
	}
	public obtenerGeoData(direccion){
		return this.http.get('http://maps.google.com/maps/api/geocode/json?address='+direccion);
	}
	public getLugar(id){
        return this.afDB.object('lugares/'+id);
    }
}

Yomar Esteban Miranda Sarmiento

student

Carlos gracias por la ayuda, luego de Googlear por unos minutos se me dio por revisar los comentarios y vi tu aporte, me funcionó y quiero hacer la aclaración que también funciona en Angular 6.

Carlos Enrique Ramírez Flores

student

si de hecho hay muchas cosas que funcionan en 5 y 6, mas delate en el curso veras este tipo de problemas.

Felipe de Jesús Víctor Arceo

student

Lo que me funcionó con Angular 7

 return this.http.get(this.API_ENDPOINT+'/.json').pipe(
      map(
        resultado => resultado['lugares']
      )
 );

Juan Carlos Ortiz Huamán

student

para aquellos que les de el error de que json() no es un object, y no puedan acceder a lugares

public getAllFirebase(){
        return this.http.get(this.API_ENDPOINT+'/.json')
            .map((resultado) => {
                debugger;
                return resultado['lugares'];

            });
    }

Henry Tabima Giraldo

student

Para pasar de un Object a un Array se puede usar

this.lugares = Object.values(res)

Cristhian Tarazona

student

Ahora el problema es en editar no esta mostrando lo valores solo me muestra aquellos que se registraron antes de la modificación de guardar.

Alejandro Valenzuela

student

hola, pudiste solucionarlo?

Maria de los Angeles Silva Gutierrez

student

yo trabajo con angular 8 import { map } from "rxjs/operators";

lugares.service.ts public getLugares(){ //Metodo Get return this.http.get(this.API_ENDPOINT+'/.json') .pipe(map((resultado) =>{ const data = resultado.json().lugares; return data; })) }

lugares.component.ts constructor(private lugaresService: LugaresService){ lugaresService.getLugares().subscribe(lugares =>{ this.lugares = lugares; var me = this; me.lugares = Object.keys(me.lugares).map(function (key) { return me.lugares [key]; }); //debugger; // para ver si llega el array }); }

Yomar Esteban Miranda Sarmiento

student

Hoy 30 Junio del 2018, para que map() funcione se debe hacer de la siguiente manera:
PD: Estoy utilizando Angular 6.

A la hora de realizar el import es la siguiente:

import { map } from 'rxjs/operators';

Para que les pueda funcionar deben de hacerlo de la siguiente forma:

public getLugares(){
        return this.http.get(this.API_ENDPOINT+'/.json')
            .pipe(map((resultado) => {
                const data = resultado.json().lugares;
                return data;
            }))
    }

Francisco Manuel Velásquez Escobar

student

Funcionó, gracias!

Cristian Palta

student

buenas clases

Víctor Hugo Rivas Sánchez

student

Solucion en getLugares con mapa:

public getLugares() {
        return this.http.get(this.API_ENDPOINT + '/.json')
                   .map(resultado => resultado['lugares']);
    }

Carlos Uriel de Jesus Sánchez González

student

public getLugares(){
        returnthis.http.get(this.API_ENDPOINT+'/.json')
            .pipe(map((resultado) => {
                const data = resultado.json().lugares;
                return data;
            }))
    }

ARTURO CASTRO RAMÍREZ

student

Al importar

import 'rxjs/add/operator/map'

me marca un error y ademas no me identifica el .map

Demian Arenas

student

Hola arcara, si la versión de tu rxjs es la 6 entonces tu problema es que hubo varios cambios es la librería, para importar los operadores ahora debes escribir

import { map } from 'rxjs/operators';

Bruno Belisario Tijero Tolentino

student

Ninguna de las soluciones que pusieron me funcionó. Modifiqué un poco los códigos y listo:

import {map} from 'rxjs/operators';

public getLugares() { //return this.afDB.list('listados/').valueChanges(); return this.http.get(this.API_ENDPOINT + '/listados.json').pipe(map((resultado) => { return Object.values(resultado); })); }

Jovanny Hernandez

student

lugares.service.ts

  public getLugares() {
    return this.http.get(this.API_ENDPOINT + '/.json')
    .pipe(map(resultado => resultado['lugares']));
  }

lugares.component.ts

constructor(private lugaresService: LugaresService) {
    this.lugaresService.getLugares()
    .subscribe( lugares => {
      this.lugares = Object.values(lugares)
    });
  }

import { Injectable } from "@angular/core"
import { AngularFireDatabase } from'angularfire2/database';
import {Http, Headers} from "@angular/http"
import { map } from 'rxjs/operators'
@Injectable()
export class LugaresService{
	API_ENDPINT = 'https://platzisquare-18656.firebaseio.com'
	lugares:any = []
	constructor(private afDB: AngularFireDatabase, private http: Http) {
	}
	public getLugares(){
		//return  this.afDB.list('lugares')
		return this.http.get(this.API_ENDPINT+'/.json')
					.pipe(map((resultado)=>{
							const data =  resultado.json().lugares
							return data
						})
					)
	}
	public buscarLugar(id){
		return this.lugares.filter((lugar) => { return lugar.id == id})[0] || null
	}
	public guardarLugar(lugar){
		//this.afDB.database.ref('lugares/'+lugar.id).set(lugar)
		const headers = new Headers({'Content-Type':'application/json'})
		return this.http.post(this.API_ENDPINT+'/lugares.json',lugar,{headers:headers}).subscribe()
	}
	public editarLugar(lugar){
		this.afDB.database.ref('lugares/'+lugar.id).set(lugar)
	}
	public obtenerGeoData(direccion){
		return this.http.get('http://maps.google.com/maps/api/geocode/json?address='+direccion);
	}
	public getLugar(id){
        return this.afDB.object('lugares/'+id);
    }
}

public getAllFirebase(){
        return this.http.get(this.API_ENDPOINT+'/.json')
            .map((resultado) => {
                debugger;
                return resultado['lugares'];

            });
    }

public getLugares(){
        return this.http.get(this.API_ENDPOINT+'/.json')
            .pipe(map((resultado) => {
                const data = resultado.json().lugares;
                return data;
            }))
    }

public getLugares(){
        returnthis.http.get(this.API_ENDPOINT+'/.json')
            .pipe(map((resultado) => {
                const data = resultado.json().lugares;
                return data;
            }))
    }

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET