Как выровнять ответ JSON с интерфейсом TypeScript Angular6

Question

Я получаю список загруженных файлов из конечной точки сервера, который возвращает его в следующем формате:

[
    {
        "filename": "setup.cfg",
        "id": 1,
        "path": C:\\back-end\\uploads\\setup.cfg",
        "uploaded_at": "Fri, 01 Jun 2018 09:25:19 -0000"
    },
    {
        "filename": "57760713_1467275948.jpg",
        "id": 2,
        "path": "C:\\back-end\\uploads\\57760713_1467275948.jpg",
        "uploaded_at": "Mon, 04 Jun 2018 09:09:59 -0000"
    },

    .
    .
    .

]

И у меня есть следующий интерфейс TypeScript, чтобы выровнять их с:

export interface UploadModel {
    id: number;
    name: string;
    path: string;
    uploadedAt: Date;
}

Как видите, извлеченные данные используют соглашение об именах snake_case как uploaded_at, а интерфейс использует соглашение о CamelCase как uploadedAt.

Я хотел бы использовать следующий фрагмент для получения данныхиз бэкэнда:

  getUploads(): Observable<UploadModel[]> {
    this.http.get(UPLOADS_ENDPOINT)
     .map((response: Response) => {

         // parse the json response here, and return an array of UploadModels

     });
  }

Есть ли какой-нибудь умный способ отобразить эти два представления без отображения массива объектов JSON?

Answer 1

Вы можете написать общую функцию, которая преобразует все ключи из подчеркнутого в верблюжий корпус.Это довольно грубая версия - вы можете сделать ее более изящной и даже рекурсивной, если вам нужно исправить вложенные объекты.

const data = [
  {
    "filename": "setup.cfg",
    "id": 1,
    "path": "C:\\back-end\\uploads\\setup.cfg",
    "uploaded_at": "Fri, 01 Jun 2018 09:25:19 -0000"
  },
  {
    "filename": "57760713_1467275948.jpg",
    "id": 2,
    "path": "C:\\back-end\\uploads\\57760713_1467275948.jpg",
    "uploaded_at": "Mon, 04 Jun 2018 09:09:59 -0000"
  }
];

function underscoreToCamel(key: string) {
  return key.replace(/_([a-z])/g, function (g) { return g[1].toUpperCase(); });
}

function convertKeys(input: any[]) {
  const output = [];
  for (const item of input) {
    const obj = {};
    for (const key in item) {
      obj[underscoreToCamel(key)] = item[key];
    }
    output.push(obj);
  }
  return output;
}

const result = convertKeys(data);
console.log(result);

Вывод:

[
    {
        "filename":"setup.cfg",
        "id":1,
        "path":"C:\\back-end\\uploads\\setup.cfg",
        "uploadedAt":"Fri, 01 Jun 2018 09:25:19 -0000"
    },
    {
        "filename":"57760713_1467275948.jpg",
        "id":2,
        "path":"C:\\back-end\\uploads\\57760713_1467275948.jpg",
        "uploadedAt":"Mon, 04 Jun 2018 09:09:59 -0000"
    }
 ]

Answer 2

Нет, нет.

Я бы посоветовал вам справиться с вашим ответом, но, похоже, вы не хотите этого делать.

Исходя из этого, у вас есть три решения:

1. Создайте два интерфейса: IUploadResponse и IUpload (model является избыточным).Объекты, создающие эти интерфейсы, создадут явное отображение в конструкторе,

2. Создайте абстрактный класс с методом преобразования: опять же, явное отображение,

3. Создание конвертера snake_case to camelCase, который создает простой объект от змеи до верблюда.Преимущество состоит в том, что вы можете использовать это повторно, недостатком является то, что вы не можете изменить filename на name.Кроме того, он не будет создавать объекты как таковые , поэтому у вас не будет доступа к typeof или instanceof.