Angular2 отображение вложенного массива json в модель

Я не могу сопоставить вложенный массив json, который является ответом Из интернета на мой массив модели в Angular2. Предположим, у меня есть ответ массива JSON, как показано ниже:

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

Я пытался вручную сопоставить поля, ссылаясь на ссылку Angular 2 observable не "сопоставляет" модель к моей модели и смог отобразить их в моем HTML, выполнив итерацию через ngFor.....но я хочу также отобразить значение ncloc и строк также в HTML, но я не уверен, как сопоставить эти значения к моему массиву моделей, как указано в приведенной выше ссылке. Не могли бы вы помочь мне с этим?

спасибо.

редактировать

класс режим

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));
    } 
 }
9
angular arrays json observable

1 ответов

вы можете упростить свою модель и ваше отображение много. Вам не нужно сопоставлять свой ответ API вручную. JavaScript/TypeScript может сделать это за вас.

сначала вам нужно несколько интерфейсов.

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

затем вы можете использовать as-"оператор"машинопись для приведения ответа API к типу DeiInstance.

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

Если вы используете интерфейсы вместо классов, у вас также есть преимущество, что у вас меньше производственного кода, который будет быть отправлено в клиентский браузер. Интерфейс существует только для предварительного времени компиляции или как вы хотите его назвать.

надеюсь, что мой код работает, и это решит вашу проблему.

19