Angular2 Mapowanie zagnieżdżonej tablicy json na model

Question

Nie mogę mapować zagnieżdżonej tablicy json, która jest odpowiedzią z sieci na moją tablicę modeli w Angular2. Załóżmy, że mam odpowiedzi json tablicy jak poniżej:

[{ 
    "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" 
}] 

starałem się ręcznie map pól odnoszących link Angular 2 observable doesn't 'map' to model do mojego modelu i był w stanie wyświetlać te w moim HTML przez iteracja ngFor ..... ale Chcę również wyświetlić wartość ncloc i linii również w kodzie HTML, ale nie jestem pewien, jak zmapować te wartości do mojej tablicy modeli, jak wspomniano w powyższym łączu. Czy możesz mi pomóc z tym?

Dzięki.

EDIT

klasa Tryb

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)); 
    } 
} 

Answer 1

można uprościć modelu oraz mapowanie dużo. Nie trzeba ręcznie mapować odpowiedzi interfejsu API. JavaScript/TypeScript może to dla ciebie zrobić.

Najpierw potrzebujesz wielu interfejsów.

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; 
} 

Następnie można użyć as - "operator" z maszynopis rzucić swoją odpowiedź API do DeiInstance Type.

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

Jeśli używasz interfejsu zamiast klasy masz również tę zaletę, że masz mniej kodu produkcyjnego, który zostanie Wysłano wiadomość do przeglądarki klienta. Interfejs jest dostępny tylko na czas kompilacji lub jakkolwiek chcesz go nazwać.

Mam nadzieję, że mój kod działa i rozwiązuje twój problem.