Разобрать / отобразить ответ API Angular 7 на класс модели - PullRequest
Новая
       44

Разобрать / отобразить ответ API Angular 7 на класс модели

0 голосов
/ 06 января 2019

Я новичок в Angular. Пожалуйста, извините, если я что-то упустил.

Я пытаюсь сделать вызов API. Для этого я создал базовый класс обслуживания с именем base.service.ts (необходим код ниже) - 

public get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.httpClient.get(BASE_URL + path, { params }).pipe(catchError(this.formatErrors));
}

Я также создал новый класс службы с именем visitor.service.ts, откуда я вызываю метод get базовой службы, как показано ниже - 

export class VisitorService {

  constructor(private baseService: BaseService) { }

    getVisitors(): Observable<Visitor[]> {
        return this.baseService.get(String.Format(Globals.endpoints.visitors));
    }
}

Из моего класса компонентов с именем dashboard.component.ts я загружаю этот список посетителей - 

export class DashboardComponent implements OnInit {

  constructor(private visitorService: VisitorService) { }

  ngOnInit() {
    this.loadTodaysVisitors();
  }

  private loadTodaysVisitors() {

    this.visitorService.getVisitors().subscribe(
      data => {
        console.log(data)
      }
    );
  }
}

Мой первый вопрос: когда я запускаю этот код, я не вижу ничего зарегистрированного на консоли. Почему?

Также мой ответ будет в следующем формате - 

[
    {
        "visitor": {
            "attendeeFirstName": "ABC",
            "attendeeSurname": "XYZ",
        },
        "visitorcheckin": [
            {
                "field": value,
                "field1": value1,
            },{
                "field": value,
                "field1": value1,
            }
        ],
        "visitorcheckout": [
            {
                "field": value,
                "field1": value1,
            },{
                "field": value,
                "field1": value1,
            }
        ]
    },
    {
        "visitor": {
            "attendeeFirstName": "DEF",
            "attendeeSurname": "PQR",
        },
        "visitorcheckin": [
            {
                "field": value,
                "field1": value1,
            },{
                "field": value,
                "field1": value1,
            }
        ],
        "visitorcheckout": [
            {
                "field": value,
                "field1": value1,
            },{
                "field": value,
                "field1": value1,
            }
        ]
    },
]

Я создал модель посетителя для этого имени visitor.model.ts - 

import { Deserializable } from '../interfaces/deserializable.interface';
export class Visitor implements Deserializable {

    attendeeFirstName: string;
    attendeeSurname: string;

    deserialize(input: any): this {
        Object.assign(this, input);
        return this;
      }
}

Файл desrializable.interface.ts - 

export interface Deserializable {
    deserialize(input: any): this;
}

Является ли это правильным способом создания модели для структуры ответа вышеупомянутого типа? Кроме того, как я могу отобразить ответ на мои объекты модели и как их использовать в dashboard.component.ts?

Спасибо!

1 Ответ

0 голосов
/ 06 января 2019

Ваш JSON недействителен, я исправил его и должен выглядеть следующим образом:

[ { "посетитель": { "sendeeFirstName": "ABC", "фамилия участника": "XYZ" }, "visitorcheckin": [ { «поле»: «значение», "field1": "value" }, { «поле»: «значение», "field1": "value" } ], "Visitorcheckout": [ { «поле»: «значение», "field1": "value" }, { «поле»: «значение», "field1": "value" } ] }, { "посетитель": { "sendeeFirstName": "DEF", "фамилия участника": "PQR" }, "visitorcheckin": [ { «поле»: «значение», "field1": "value" }, { «поле»: «значение», "field1": "value" } ], "Visitorcheckout": [ { «поле»: «значение», "field1": "value" }, { «поле»: «значение», "field1": "value" } ] } ]

вы можете использовать JSON2TS для создания интерфейса для вашей модели, и получающиеся в результате интерфейсы будут выглядеть следующим образом: 

declare module namespace {

    export interface Visitor {
        attendeeFirstName: string;
        attendeeSurname: string;
    }

    export interface Visitorcheckin {
        field: string;
        field1: string;
    }

    export interface Visitorcheckout {
        field: string;
        field1: string;
    }

    export interface RootObject {
        visitor: Visitor;
        visitorcheckin: Visitorcheckin[];
        visitorcheckout: Visitorcheckout[];
    }

}
...