Как сопоставить класс модели данных Angular с запросом API POST? - PullRequest
Новая
       32

Как сопоставить класс модели данных Angular с запросом API POST?

0 голосов
/ 08 июля 2020

Проблема, с которой я столкнулся, заключается в том, что мои классы модели данных в проекте Angular не соответствуют напрямую формату тела, необходимому для моего запроса API. Каждый запрос / ответ API в основном заключен в дополнительные поля.

Формат JSON, необходимый для запроса API к моей конечной точке, выглядит примерно так: (Примечание: это также формат, возвращаемый при выполнении запросов GET) 

{
  "data": {
    "type": "user",
    "attributes": {
      "username": "tom",
      "password": "abc123",
      "email": "tom@mail.com"
    }
  }
}

Это нормально для запросов GET, поскольку я могу использовать интерфейсы. Чтобы отобразить данные в модель, примерно так: 

  export interface APIResponse<T = any> {
    data: {
      id: number;
      type: string;
      attributes: T;
    }
  }


  // HttpClient method used to access API endpoint and map Response into Model class
  public getUser(id: number): Observable<UserModel> {
    return this.apiService
      .get<APIResponse<UserModel>>(`${URL}`)
      .pipe(map((resp: APIResponse<UserModel>) =>
          resp.data.map(record => new UserModal(record.attributes)),
        ),
      );
  }

Однако для запросов POST. Мне почти нужна какая-то оболочка / шаблон или способ преобразовать модель в запрос.

Теперь я могу напрямую скопировать эту структуру с данными, атрибутами, а затем использовать эту модель напрямую как мой API POST Кузов, без проблем. Обратной стороной является то, что мне постоянно приходится использовать такие атрибуты в моем коде, как это: 

// Have to access data models like this:
<div>{{ data.attributes.username }}</div>

// Would prefer to access like this:
<div>{{ data.username }}</div>

ПЫТАЕТСЯ ИЗБЕЖАТЬ 

export class UserModel {
  public type: string;
  public id: number;
  public attributes: UserAttributesModel;

  constructor(data) {
    this.type = 'user';
    this.id = data.id ;
    this.attributes = new PoolAttributesModel(data.attributes);
  }
}

MUCH CLEANER AIM 

export class UserModel {
  public type: string;
  public id: number;
  public username: string;
  public password: string;
  public email: string;

  constructor(data) {
    this.type = 'user';
    this.id = data.id ;
    this.username = data.username;
    this.password = data.password;
    this.email = data.email;
  }
}

Все ресурсы в Интернете постоянно предлагают решения для JSON Response> Model. Однако никто, похоже, не предлагает решений для обратного с запросами POST.

  • Итак, мой общий вопрос будет заключаться в том, есть ли какие-либо предложения или решения о том, как я могу сохранить невложенную структуру данных (без атрибутов) для использования при передаче данных по моему проекту Angular. Но когда дело доходит до выполнения запроса POST с использованием этих данных, преобразовать его в правильный формат? конвертировать между ними только для создания тела POST?

  • Существует ли что-нибудь с Angular HttpClient, чтобы я мог предоставить шаблон для всех запросов POST?

Любые подсказки приветствуются!

...