web-dev-qa-db-fra.com

Angular2 Mappage du tableau json imbriqué au modèle

Je ne suis pas en mesure de mapper le tableau json imbriqué qui est la réponse du Web à mon tableau de modèles dans Angular2. Supposons que j'ai la réponse du tableau json comme ci-dessous:

[{
    "base_url": "http://mysearch.net:8080/",
    "date": "2016-11-09",
    "lname": "MY PROJ",
    "name": "HELLO",
    "description": "The Test Project",
    "id": 10886789,
    "creationDate": null,
    "version": "2.9",
    "metrics": [{
        "val": 11926.0,
        "frmt_val": "11,926",
        "key": "lines"
    },
    {
        "val": 7893.0,
        "frmt_val": "7,893",
        "key": "ncloc"
    }],
    "key": "FFDFGDGDG"
}]

J'essayais de mapper manuellement les champs référençant le lien Angular 2 observable ne "mappe" pas au modèle à mon modèle et a pu afficher ceux-ci dans mon HTML en itérant via ngFor ..... mais je veux aussi afficher la valeur ncloc et lines également dans le HTML mais je ne sais pas comment mapper ces valeurs à mon tableau Model comme mentionné dans le lien ci-dessus. Pouvez-vous m'aider s'il vous plait?

Merci.

[~ # ~] modifier [~ # ~]

Classe de mode

export class DeiInstance { 
    base_url: string;
    date: string;
    lname : string;
    name : string;
    id : number;
    key:string;

    constructor(obj: DeiInstance) {
        this.sonar_url = obj['base_url'];
        this.lname = obj['lname'];
        this.name = obj['name'];
        this.id = obj['id'];
        this.key = obj['key'];
        this.date = obj['date'];
    } 

    // New static method. 
    static fromJSONArray(array: Array<DeiInstance>): DeiInstance[] {
        return array.map(obj => new DeiInstance(obj));
    } 
 }
arraysjsonangularobservable
11
PingPong

Vous pouvez beaucoup simplifier votre modèle et votre cartographie. Vous n'avez pas besoin de mapper votre réponse API manuellement. JavaScript/TypeScript peut le faire pour vous.

Vous avez d'abord besoin de plusieurs interfaces.

export interface DeiInstance { 
    base_url: string;
    date: string;
    lname: string;
    name: string;
    description: string;
    id: number;
    creationDate: string; //probably date
    version: string
    metrics: Metric[];
    key: string;
 }

 export interface Metric {
      val: decimal;
      frmt_val: decimal;
      key: string;
 }

Vous pouvez ensuite utiliser as- "opérateur" de TypeScript pour convertir votre réponse API au type DeiInstance.

 sealSearch(term: string): Observable<DeiInstance[]> {
      return this.http.get(this.sealUrl + term)
           .map(response => response.json() as DeiInstance[])
           .catch(this.handleError);
 }

Si vous utilisez des interfaces au lieu de classes, vous avez également l'avantage d'avoir moins de code de production qui sera envoyé au navigateur client. L'interface n'est là que pour la pré-compilation ou comme vous voulez l'appeler.

J'espère que mon code fonctionne et qu'il résout votre problème.

22
M4R1KU