ERREUR TypeError: Impossible de lire la propriété 'nom' de non défini

Question

J'apprends à utiliser HTTPClientModule dans Angular 4.3 J'ai importé correctement dans app.module.ts et j'essaye de faire un http Request GET. Ceci est mon application.component.ts

import { Component, OnInit } from '@angular/core'; 
import { HttpClient} from '@angular/common/http'; 
interface Card { 
    card: [{ 
    cardClass: string, 
    cost: number; 
    }]; 
} 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    constructor(private http: HttpClient) {} 
    ngOnInit(): void { 


    this.http.get<Card>('https://api.hearthstonejson.com/v1/21517/enUS/cards.collectible.json').subscribe(data => { 
     console.log(data.card); //This is not working returning undefined 
     console.log(data); //This is not working (removing <Card>) 
    }); 

    } 

} 

Pourquoi data.card n'est pas défini? Comment puis-je avoir accès à l'élément de l'objet ici pour passer ensuite dans un tableau de cartes? Merci pour toute aide

Answer 1

L'API renvoie un tableau d'objets, mais votre interface Card définit un objet avec la propriété card. Vous devez utiliser l'interface qui décrira la réponse, comme ceci:

interface Card { 
    cardClass: string; 
    cost: number; 
} 

interface CardArray { 
    [index: number]: Card; 
} 

this.http.get<CardArray>('https://api.hearthstonejson.com/v1/21517/enUS/cards.collectible.json').subscribe(data => { 
    console.log(data[0]); // first card 
    console.log(data); // all cards 
}); 

Ou même approche plus simple:

this.http.get<Card[]>('https://api.hearthstonejson.com/v1/21517/enUS/cards.collectible.json').subscribe(data => { 
    console.log(data[0]); // first card 
    console.log(data); // all cards 
}); 

Answer 2

essayer d'ajouter map méthode avec méthode json juste avant vous inscrire

this.http.get<Card>('https://api.hearthstonejson.com/v1/21517/enUS/cards.collectible.json') 
    .map(res => res.json()) 
    .subscribe(data => { 
    console.log(data.card); //This is not working returning undefined 
    console.log(data); //This is not working (removing <Card>) 
    });