A step-by-step guide on generating a TypeScript class using JSON data

Question

A step-by-step guide on generating a TypeScript class using JSON data

Working with Angular and making a call to an external API. The JSON data is structured as follows:

[
      {
        "AccessGroupsIdList": [],
        "FirstName": "Greg",
        "LastName": "Tipton",
        "LocationIdList": [],
        "PermissionProfile": {
          "Name": "Agent",
          "PermissionProfileId": {
            "ID": "xy678219-bd7c-103d-b56b-1f1234a85990"
          },
          "Type": 3
        },
        "ManagerName": "Gilchrist, George",
        "Status": true,
        "UserGroupID": {
          "ID": "00000000-0000-0000-0000-000000000000"
        },
        "UserGroupName": "ROOT",
        "UserId": {
          "ID": "4445cc66-819a-4da0-8fbf-d0bb8ce65941"
        }
      }
    ]

Seeking guidance on creating a TypeScript class to properly parse this nested JSON data structure.

export class Employees
{
    AccessGroupsIdList: string[];
    FirstName: string;
    LastName: string;
    LocationIdList : number[];
    PermissionProfile ??
    ManagerName: string;
    Status: boolean;
    UserGroupID ??
    UserGroupName : string;
    UserId ??
}

Questioning whether the PermissionProfile and other nested properties should be classified into separate classes?

If so, how do I define these nested classes?

json angular typescript

Answer 1

Answer №1

In Building on Andrew Halil's response, I suggest utilizing interfaces instead of classes in your definitions, as there are no class methods apparent; rather, you are simply defining the structure of a JSON object that is returned from a server.

export interface Employee
{
    AccessGroupsIdList: string[];
    FirstName: string;
    LastName: string;
    LocationIdList : number[];
    PermissionProfile: PermissionProfile;
    ManagerName: string;
    Status: boolean;
    UserGroupId: ID;
    UserGroupName : string;
    UserId: ID;
}

export interface PermissionProfile 
{
    name: string;
    permissionProfileId: ID;
    type: string;
}

export interface ID
{
    id: string;
}

As for implementation, while my experience with Angular is limited, you could follow this approach to ensure typed items:


async function listEmployees(): Promise<Employee[]> {
// Call the API endpoint using fetch
   const data = await fetch('https://some-api-endpoint.web/employees')
      // Check if the response is successful and return the parsed JSON response.
      .then(res => {
          if(res.ok) return res.json()
          return [];
      });
    // Specify to TypeScript that "data" should be treated as an array of Employee elements.
    return data as Employee[]
}

Answer 2

In Building on Andrew Halil's response, I suggest utilizing interfaces instead of classes in your definitions, as there are no class methods apparent; rather, you are simply defining the structure of a JSON object that is returned from a server.

export interface Employee
{
    AccessGroupsIdList: string[];
    FirstName: string;
    LastName: string;
    LocationIdList : number[];
    PermissionProfile: PermissionProfile;
    ManagerName: string;
    Status: boolean;
    UserGroupId: ID;
    UserGroupName : string;
    UserId: ID;
}

export interface PermissionProfile 
{
    name: string;
    permissionProfileId: ID;
    type: string;
}

export interface ID
{
    id: string;
}

As for implementation, while my experience with Angular is limited, you could follow this approach to ensure typed items:


async function listEmployees(): Promise<Employee[]> {
// Call the API endpoint using fetch
   const data = await fetch('https://some-api-endpoint.web/employees')
      // Check if the response is successful and return the parsed JSON response.
      .then(res => {
          if(res.ok) return res.json()
          return [];
      });
    // Specify to TypeScript that "data" should be treated as an array of Employee elements.
    return data as Employee[]
}

Answer 3

Answer №2

To properly define the TypeScript class structures, it is recommended to use the following format:

export class EmployeesList
{
    accessGroups: string[];
    firstName: string;
    lastName: string;
    locationIds: number[];
    permissionProfile: PermissionProfileDetails;
    managerName: string;
    isActive: boolean;
    userGroupId: UserGroupIdentifier;
    userGroupName: string;
    userId: UserIdentifier;
}

export class PermissionProfileDetails 
{
    name: string;
    profileId: ProfileIdentifier;
    type: string;
}

export class ProfileIdentifier
{
    id: string;
}
 
export class UserGroupIdentifier
{
    id: string;
}

export class UserIdentifier
{
    id: string;
}

I recommend keeping the property names consistent with an "Id" suffix (e.g. using UserGroupId). It's important to note that the naming conventions for class properties like name and type are valid in TypeScript compared to C# syntax.

Answer 4

To properly define the TypeScript class structures, it is recommended to use the following format:

export class EmployeesList
{
    accessGroups: string[];
    firstName: string;
    lastName: string;
    locationIds: number[];
    permissionProfile: PermissionProfileDetails;
    managerName: string;
    isActive: boolean;
    userGroupId: UserGroupIdentifier;
    userGroupName: string;
    userId: UserIdentifier;
}

export class PermissionProfileDetails 
{
    name: string;
    profileId: ProfileIdentifier;
    type: string;
}

export class ProfileIdentifier
{
    id: string;
}
 
export class UserGroupIdentifier
{
    id: string;
}

export class UserIdentifier
{
    id: string;
}

I recommend keeping the property names consistent with an "Id" suffix (e.g. using UserGroupId). It's important to note that the naming conventions for class properties like name and type are valid in TypeScript compared to C# syntax.

A step-by-step guide on generating a TypeScript class using JSON data

Answer №1

Answer №2

Similar questions

Getting specific data from JSON Path extractor with a condition

What is the best way to pass the modal dialog parameter sent from HTML to the TypeScript page?

Showing information from a JSON dataset of users once a specific User ID has been chosen

Exploring a Firestore collection to extract data fields for storage and utilization

Cannot execute loop

Struggling to use the uploadFiles function with the kendo-upload component

There is an issue with the Angular Delete request functionality, however, Postman appears to be

Get the item from the dictionary so that it can be effortlessly converted through json.dumps()

Problems with updating HTML/Typescript in Visual Studio and Chrome are causing frustration

Modify the content of package.json using command line interface

The 'any' type is automatically assigned to Angular and Element since the type 'IData' lacks an index signature

Send out data every 250 milliseconds in a way that resembles debounceTime(), but without any waiting period

Error encountered while bundling CDK Synth with Node.js function - Kindly ensure to update your lock file by running `npm install` before proceeding further

Using Angular 2 to pass a function as an argument to a constructor

"Retrieve a specific object from a JSON file using NextJS based on its ID

Arrange the columns in Angular Material Table in various directions

Sending JSON data to PHP using AJAX request

Issue with Angular trackBy not functioning properly within a nested *ngFor loop

Do JSON objects and DTOs share the same characteristics?

What is the best way to choose the contents of every JSON array?