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

What steps are required to configure angular-eslint for a protractor project?

Creating a new formGroup and submitting it with model-driven form in Angular 2

Experience the power of Stimulsoft reporting integrated with Angular and Asp.net Core-framework!

Creating a TypeScript interface for Immutable.js objects: A step-by-step guide

Issue with Angular authentication during login attempt

Creating a global variable in Angular that can be accessed by multiple components is a useful technique

Incorporating ngrx/Store into a current Angular application

Extracting information from AJAX calls using a DataTable

Encountered issue while transferring the result of urllib.urlopen to json.load

Utilizing jQuery to process JSON data by extracting a single response from an array

Exploring the possibilities of combining AngularJS and Angular 2 routing with wildcard paths

Problematic Angular 6 Lazy Loading Situation

Guide on refreshing an Angular 2 application after a user has logged out

Using an Angular interface for an HTTP request: The statusText message reads as "Error: Unable to Determine."

Is it possible to have a button within a table that, when clicked, opens a card overlaying the entire table?

Executing observables sequentially based on their dependencies

Unable to retrieve the key value from a child object in Angular 2 when working with JSON Data

Exploring TypeScript: A Study on Interfaces and Abstraction

How can we retrieve URL parameters with the help of ActivatedRoute in Angular?

Is there a way to maintain formdata between components in Angular?