Asignar valores de Observable a una Interfaz en Angular
Estoy tratando de asignar todos los valores que recibo de un JSONArray en una instancia de interfaz. Los datos JSON que recibo son así:
0:
attack_type: "Melee"
id: 1
legs: 2
localized_name: "Anti-Mage"
name: "npc_dota_hero_antimage"
primary_attr: "agi"
roles: Array(3)
0: "Carry"
1: "Escape"
2: "Nuker"
I 120 de éstos de un api web a través de un HTTP obtener solicitud, y me gustaría que cada entrada se almacena como un tipo de Héroe de la interfaz:
export interface Hero {
attack_type: string;
id: number;
legs: number;
localized_name: string;
name: string;
primary_attribute: string;
roles: string[];
}
Actualmente estoy haciendo esto en mi componente (seguí la guía en la Documentación de Anuglar.io):
showHeroes() {
this.httpService.getHeroes()
// clone the data object, using its known Hero properties
.subscribe((data: Hero) => this.currentHero = {
attack_type: (data as any).attack_type,
id: (data as any).id,
legs: (data as any).legs,
localized_name: (data as any).localized_name,
name: (data as any).name,
primary_attribute: (data as any).primary_attribute,
roles: (data as any).roles,
});
}
Pero esto no parece funcionar, porque si consola.log (actualHero.name), obtengo un valor indefinido. ¿Alguien sabe dónde me equivoco?
Pregunta hecha hace 3 años, 5 meses, 4 días - Por devninjax
2 Respuestas:
-
El problema está en cómo estás procesando los datos recibidos de la petición HTTP en tu función
showHeroes
.El método
subscribe
de un Observable en Angular devuelve un array de objetos, no un objeto individual. Por lo tanto, debes tratardata
como un array en lugar de un objeto directamente.Para asignar todas las entradas del array a instancias individuales de la interfaz
Hero
, puedes hacer lo siguiente:typescript showHeroes() { this.httpService.getHeroes().subscribe((data: Hero[]) => { this.currentHeroes = data.map((hero) => ({ attack_type: hero.attack_type, id: hero.id, legs: hero.legs, localized_name: hero.localized_name, name: hero.name, primary_attribute: hero.primary_attribute, roles: hero.roles, })); }); }
En este caso,
this.currentHeroes
debería ser un array de objetosHero
, y cada objeto en ese array contendrá una instancia de la interfazHero
con los datos correspondientes del array recibido en la respuesta HTTP.Espero que esta corrección te sea útil. ¡Déjame saber si tienes alguna otra pregunta!
Respondida el Dec 19, 2020 a las 23:10 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
El problema es que el observable está emitiendo un array de objetos
Hero
, no un objetoHero
simple. Por lo tanto, necesitas suscribirte al observable y luego iterar sobre el array de objetosHero
para asignarlos a tu lista de héroes.Aquí tienes el código corregido:
showHeroes() { this.httpService.getHeroes() .subscribe((data: Hero[]) => { data.forEach((hero) => { this.currentHeroList.push(hero); }); }); }
Esto iterará sobre el array de objetos
Hero
y añadirá cada objetoHero
a tu lista de héroescurrentHeroList
.Respondida el Dec 19, 2020 a las 23:12 - por Gemini
Votos positivos: 0 | Votos negativos: 0