Tips for synchronizing response JSON with TypeScript interface in Angular 6

Question

Tips for synchronizing response JSON with TypeScript interface in Angular 6

I am retrieving a list of files that have been uploaded from a backend endpoint, and it comes back in this 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"
    },

    .
    .
    .

]

Along with this data, I have a TypeScript interface designed like so:

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

The issue lies in the naming conventions used; the returned data follows snake_case as uploaded_at while my interface uses camelCase as uploadedAt.

I'm looking to fetch this information from the backend using the following code snippet:

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

         // Need to parse the JSON response here and return an array of UploadModels

     });
  }

Any tips on how to effectively map these two representations without manually iterating through the array of JSON objects?

json angular typescript parsing

Answer 1

Answer №1

A custom function can be created to convert keys from underscored format to camel case. Although the provided implementation is basic, it can be enhanced for better efficiency and potentially recursive handling of 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

A custom function can be created to convert keys from underscored format to camel case. Although the provided implementation is basic, it can be enhanced for better efficiency and potentially recursive handling of 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 3

Answer №2

Unfortunately, there is no simple solution available.

It may be challenging to deal with your response right now, but avoiding it will only make things more difficult in the long run.

Here are three possible approaches you can consider:

You could create two distinct interfaces - IUploadResponse and IUpload. Objects that implement these interfaces will need to have explicit mappings set up in their constructors.
An alternative option is to design an abstract class with a transformation method that handles the mapping process.
Another approach would be to develop a converter that transforms snake_case variables into camelCase format. While this method offers reusability, keep in mind that it may limit certain naming conventions like renaming filename to name. Additionally, this approach does not directly create objects, so you may not access features like typeof or instanceof.

Answer 4

Unfortunately, there is no simple solution available.

It may be challenging to deal with your response right now, but avoiding it will only make things more difficult in the long run.

Here are three possible approaches you can consider:

You could create two distinct interfaces - IUploadResponse and IUpload. Objects that implement these interfaces will need to have explicit mappings set up in their constructors.
An alternative option is to design an abstract class with a transformation method that handles the mapping process.
Another approach would be to develop a converter that transforms snake_case variables into camelCase format. While this method offers reusability, keep in mind that it may limit certain naming conventions like renaming filename to name. Additionally, this approach does not directly create objects, so you may not access features like typeof or instanceof.

Tips for synchronizing response JSON with TypeScript interface in Angular 6

Answer №1

Answer №2

Similar questions

The element 'nz-list-item-meta-title' in NG-ZORRO is unrecognized

What is the best way to determine if a user is connected to the internet using Angular2?

There seems to be a problem retrieving the JSON file

Retrieve a file through a POST request with node.js

How to designate the specific container to be updated in the XMLHTTP JSON code within a Joomla website?

What is the process for creating a jQuery object in TypeScript for the `window` and `document` objects?

Encountering a problem in Django when attempting to serialize decimal points, error message reads: 'ValuesListQuerySet' does not contain the attribute '_meta'

Struggling with converting JSON to JAXB with Jackson's ObjectMapper

Sending Angular signal from child component to parent component

Identifier for md-radio-group

Leveraging Font Awesome and Material Icons within ngFor in Angular 2

The plugin needed for the 'autoprefixer' task could not be located

"Troubleshooting: Why are my Webpack 2 stylesheets

Tips on effectively utilizing RABL partial templates while maintaining consistency

Retrieve additional information from JSON.stringify using a Web API Post request

Exploring the power of utilizing multiple classes with conditions in Angular 2+

What is the best way to search for an Enum based on its value?

Transferring API information into a nested array and displaying the outcome

Python: Exploring JSON Data

Is it possible to create Interactive Tabs using a Global BehaviorSubject?