How to Initialize a TypeScript Object from a JSON Object?

General Discussions
, ,
1

How do I initialize a TypeScript object with a JSON object?

I receive a JSON object from an AJAX call to a REST server. This object has property names that match my TypeScript class. However, the class (and JSON object) contains members that are lists of objects, and some members are instances of other classes, which may also contain lists or other classes.

What is the best way to initialize the TypeScript object from the JSON object? I’d prefer an approach that dynamically maps property names, assigning values, creating lists, and instantiating classes as needed, so I don’t have to write explicit code for every member in every class (as there are many members and classes). How can I do this effectively using typescript json type?

2

One approach is to use a constructor to map JSON data directly to your TypeScript class. This is a straightforward way to maintain strong typing while initializing properties, including nested classes and lists.

Here’s how it works:

class Employee {
  name: string;
  department: Department[];

  constructor(json: any) {
    this.name = json.name;
    this.department = json.department.map((d: any) => new Department(d));
  }
}

class Department {
  id: number;
  name: string;

  constructor(json: any) {
    this.id = json.id;
    this.name = json.name;
  }
}

const employeeJson = { name: "John", department: [{ id: 1, name: "HR" }] };
const employee = new Employee(employeeJson);

This approach is great for handling nested structures and ensures that the data is strongly typed with typescript json type. It does, however, require you to define constructors for all your classes. For larger projects with many classes, this might become repetitive.

3

To build on Charity’s idea, you can reduce redundancy by using a mapping function. This function dynamically initializes objects, handling nested classes and lists without requiring explicit constructors in every class.

Here’s an example of how it works:

function mapToClass<T>(json: any, classType: { new (): T }): T {
  const obj = new classType();
  for (let key in json) {
    if (Array.isArray(json[key])) {
      obj[key] = json[key].map((item: any) => mapToClass(item, obj[key][0]?.constructor));
    } else if (typeof json[key] === "object") {
      obj[key] = mapToClass(json[key], obj[key]?.constructor);
    } else {
      obj[key] = json[key];
    }
  }
  return obj;
}

class Employee {
  name: string;
  department: Department[];
}

class Department {
  id: number;
  name: string;
}

const employeeJson = { name: "John", department: [{ id: 1, name: "HR" }] };
const employee = mapToClass(employeeJson, Employee);

This approach offers more flexibility, especially when dealing with deeply nested JSON structures. You also avoid boilerplate code for constructors. It’s an excellent choice for complex projects where the typescript json type is extensively used.

4

If you’re looking for a quick and simple solution, you can use JSON.parse with type casting to initialize your object. This works best for straightforward structures but may require additional processing for nested or complex data.

Here’s an example:

class Employee {
  name: string;
  department: Department[];
}

class Department {
  id: number;
  name: string;
}

const employeeJson = '{"name": "John", "department": [{"id": 1, "name": "HR"}]}';
const employee: Employee = JSON.parse(employeeJson);

console.log(employee);

For flat or slightly nested JSON objects, this is a fast and efficient approach. However, for deeply nested data or scenarios where you need to handle lists and nested classes dynamically, you might combine this method with Priyanka’s or Charity’s suggestions for a more comprehensive solution. This way, you can still leverage typescript json type effectively while maintaining flexibility.