Simplify deeply nested JSON structures with TypeScript generics

Question

Simplify deeply nested JSON structures with TypeScript generics

After receiving the JSON data shown below, I have a specific model in mind for deserialization:

{"results":
  {"data": {
    "id":"93cba9bd-2969-3214-b26f-7f42d20241a4",
    "first_name":"PSU",
    "last_name":"Bot",
    "profile": {
        "data":{"about":"i am so happy",}
     }
  }
}

The desired model is as follows:

export class Person extends BaseModel {
    first_name: string;
    last_name: string;
    profile: DataType<Profile>;
}

The aim is to have the profile property without the nested data element.

To achieve this, I am looking into constructing a generic DataType. Here's my initial attempt:

export class DataType<T> {

public constructor(arg: T) {
    console.log(arg);
    return new arg.data;
  }
}

I'm wondering if this falls under generic type territory or should be treated as an object (class) similar to the example above. Any insights on this would be appreciated.

typescript generics interface

Answer 1

Answer №1

When dealing with nested logic, there are a couple of ways to approach it.

export class DataType<T> {
  public constructor(public data: T) {}
}

Another option is to delegate the task like this:

export class DataType<T> {
  public data: T;

  public constructor(obj: {"data":T}) {
    this.data = obj.data;
  }
}

Answer 2

When dealing with nested logic, there are a couple of ways to approach it.

export class DataType<T> {
  public constructor(public data: T) {}
}

Another option is to delegate the task like this:

export class DataType<T> {
  public data: T;

  public constructor(obj: {"data":T}) {
    this.data = obj.data;
  }
}

Answer 3

Answer №2

If you are confident that the profile property or any other value replacing it will contain the data property, you can create a versatile class to represent that part of the response:

export class DataType<T extends { data: any }> {
    public data: any;

    public constructor(arg: T) {
        this.data = arg.data;
    }

    public toJSON(): any {
        return {
            data: this.data,
        };
    }
}

Remember, the toJSON method is optional but can be helpful when using JSON.stringify on this object or its parent. It allows you to customize the output as needed.

Answer 4

If you are confident that the profile property or any other value replacing it will contain the data property, you can create a versatile class to represent that part of the response:

export class DataType<T extends { data: any }> {
    public data: any;

    public constructor(arg: T) {
        this.data = arg.data;
    }

    public toJSON(): any {
        return {
            data: this.data,
        };
    }
}

Remember, the toJSON method is optional but can be helpful when using JSON.stringify on this object or its parent. It allows you to customize the output as needed.

Simplify deeply nested JSON structures with TypeScript generics

Answer №1

Answer №2

Similar questions

Best practices for organizing API Services using TypeScript and Next.js Server Actions

Angular 2 Validation Customizer

Having trouble with code behaving differently than expected in Chrome's debugger

When using TypeORM's save() method with an array of objects, the @PrimaryColumn() annotations are ignored, resulting

Error encountered when asynchronously iterating over an object in TypeScript

The proper injection of the NestJS module is essential for seamless functionality

Exploring Angular Unit Testing: A Beginner's Guide to Running a Simple Test

What steps can I take to ensure TypeScript compiler approves of variance in calling generic handlers, such as those used in expressJS middleware?

What are the steps to resolve the issue of assigning void type to type ((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined in a react application?

ERROR: Issue detected in the e class under the e_Host - inline template 0:0

Securing pathways in Next.js using middleware and Next-Auth

How to fix an unresolved TypeScript import?

Is it possible to automatically correct all import statements in a TypeScript project?

Converting language into class components using ngx-translate in Angular

The width of the Bootstrap tooltip changes when hovered over

Obtain a value that is not defined

Methods to validate CSS attributes specified within a class using React testing library

Angular - pipe function disrupts the flow of execution

Unable to activate the AWS IoT security audit using CDK

Loading preferred routes in Angular 6+ Universal for faster performance