如何将响应json与TypeScript接口Angular6对齐

Question

I'm retrieving a list of uploaded files from a backend endpoint that returns it in the following format:

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

    .
    .
    .

]

And I have the following TypeScript interface to align them with:

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

As you can see the retrieved data uses the snake_case naming convention as uploaded_at while the interface uses the camelCase convention as uploadedAt .

I would like to use the following snippet to get the data from the backend:

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

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

     });
  }

Is there any clever way to map these two representations, without mapping through the array of JSON objects?

Answer 1

You can write a general function that converts all keys from underscored to camel casing. This is a rather crude version - you could make this more graceful and even recursive should you need to fix nested objects.

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

Output:

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

No, there isn't.

I would advise you to cope with your response, but it seems you don't want to do it.

From that, you have three solutions :

1. Create two interfaces : IUploadResponse and IUpload ( model is redundant). The objects instanciating those interface will make an explicit mapping in the constructor,

2. Create an abstract class that has a transformation method : again, explicit mapping,

3. Create a snake_case to camelCase converter, that creates a plain object from snake to camel. The advantage is that you can reuse that, the drawback is that you can't change filename to name . Also, it won't create Objects per se , so you won't have access to typeof or instanceof .