javascript - Convertir Observable<Object> a String
He encontrado este ejemplo de un servicio para obtener la dirección IP.
Este servicio devuelve un Observable<Object>, que me gustaría asignar/guardar en una variable de tipo String.
getIpAddress() {
return this.http
.get('https://api.ipify.org/?format=json')
.pipe(
catchError(this.handleError)
);
}
Todavía no estoy bien "entrenado" con Observables. He inyectado este Servicio en mi propio Servicio (un Servicio de Autenticación) donde estoy tratando de acceder al valor real, que sería una cadena.
Sé que tendré que suscribirme y usar pipe/map para poder usarlo, pero ahí es donde me pierdo...
console.log(this.visitorService.getIpAddress().subscribe(ip => this.ipAdress = ip ?? ));
Por último, quiero usar la dirección IP (cadena) dentro de mi método de inicio de sesión (donde el console.log será reemplazado y la API recibió este tercer parámetro del cuerpo):
login(username: string, password: string): Observable<User> {
// der globale interceptor (jwt) hängt halt auch hier das authorization header feld hinzu; macht nichts
console.log(this.visitorService.getIpAddress().subscribe(ip => this.ipAdress = ip ?? ));
return this.http.post<UserRaw>(
`${environment.apiUrl}/login`, { username, password } )
.pipe(map(userRaw => UserFactory.fromRaw(userRaw)))
.pipe(map(user => {
// local storage = client persistence (user bleibt eingeloggt)
localStorage.setItem('currentUser', JSON.stringify(user));
this.currentUserSubject.next(user);
// console.log(user.username);
return user;
}));
ACTUALIZACIÓN
this.visitorService.getIpAddress().subscribe(ip => { console.log(ip); } );
devuelve
pero después, no puedo acceder a él ni convertirlo :
this.visitorService.getIpAddress().subscribe(ip => { this.ipAdress = ip.ip } );
Respuesta #1
Si quieres mostrar la dirección IP en la consola, solo puedes hacerlo una vez que el valor "llega":
this.visitorService.getIpAddress().subscribe(ip => {
console.log(ip);
this.ipAdress = ip;
});
Respuesta #2
Solo usa la propiedad deseada y es una buena práctica manejar errores. Puedes ver qué propiedades están disponibles usando console.log(): te mostrará tus propiedades:
console.log(this.visitorService.getIpAddress()
.subscribe(ip => {
console.log(`your ip`, ip);
this.ipAdress = ip['yourProperty'];
},
err => {
console.log(err);
});
ACTUALIZACIÓN:
Tu código me parece bien. Sin embargo, se puede mejorar usando el método pipe solo una vez. El método pipe se usa para encadenar métodos:
login(username: string, password: string): Observable<User> {
// der globale interceptor (jwt) hängt halt auch
// hier das authorization header feld hinzu; macht nichts
return this.http.post<UserRaw>(
`${environment.apiUrl}/login`, { username, password } )
.pipe(map(userRaw => UserFactory.fromRaw(userRaw)),
map(user => {
// local storage = client persistence (user bleibt eingeloggt)
localStorage.setItem('currentUser', JSON.stringify(user));
this.currentUserSubject.next(user);
// console.log(user.username);
return user;
}));
Puedes leer más en la Guía de Estilo de Angular 2
