Deserializing concrete types from an abstract list in TypeScript (serialized in JSON.NET)

Question

Deserializing concrete types from an abstract list in TypeScript (serialized in JSON.NET)

I'm working with an API that returns an object containing a list of various concrete types that share a common base. Is there a way to automate the process of mapping these items to a specific Typescript interface model-type without having to manually map each one?

Is it possible to leverage the "$type" property that JSON.NET includes in the JSON object and automatically map it to a Typescript interface/model instance? Or is there another method that doesn't involve manual mapping?

Note: In my case, the .NET class namespace is removed during serialization from the API for client requests (e.g. { $type: 'Foo' } instead of { $type: 'MyApp.Models.Foo' })

typescript json.net

Answer 1

Answer №1

If you are in need of class instances instead of plain objects, then you must traverse the object tree using reflection and recursively deserialize it.

Here is a basic outline:

class Person
{
    name: string;

    log()
    {
        console.log("Name: " + this.name);
    }
}

class Employee
{
    age: number;

    log()
    {
        console.log("Age: " + this.age);
    }
}

class DataObject
{
    items: (Person | Employee)[];
}

/** Type mappings. */
const types = {
    "DataObject": DataObject,
    "Person": Person,
    "Employee": Employee
};

const deserialize = <R = any>(instance: { $type: string }): R =>
{
    // Create instance of the class.
    const ctor = types[instance.$type];
    const obj = new ctor();

    // Assign/deserialize all properties of the object.
    for (const key in instance)
    {
        const val = instance[key];
        if (val == null)
        {
            obj[key] = val;
        }
        else
        {
            if (typeof val.$type == 'string')
                obj[key] = deserialize(val);
            else if (Array.isArray(val))
                obj[key] = val.map(item => item == null ? item : deserialize(item));
            else
                obj[key] = val; // Might be some standard type 🤷
        }
    }

    return obj;
}

const jsonData = {
    $type: 'DataObject',
    items: [
        { $type: "Person", name: "Alice" },
        { $type: "Employee", age: 30 },
    ]
};
const testObj = deserialize<DataObject>(jsonData);

testObj.items.forEach(item => item.log());

This will output correctly:

Name: Alice
Age: 30

Answer 2

If you are in need of class instances instead of plain objects, then you must traverse the object tree using reflection and recursively deserialize it.

Here is a basic outline:

class Person
{
    name: string;

    log()
    {
        console.log("Name: " + this.name);
    }
}

class Employee
{
    age: number;

    log()
    {
        console.log("Age: " + this.age);
    }
}

class DataObject
{
    items: (Person | Employee)[];
}

/** Type mappings. */
const types = {
    "DataObject": DataObject,
    "Person": Person,
    "Employee": Employee
};

const deserialize = <R = any>(instance: { $type: string }): R =>
{
    // Create instance of the class.
    const ctor = types[instance.$type];
    const obj = new ctor();

    // Assign/deserialize all properties of the object.
    for (const key in instance)
    {
        const val = instance[key];
        if (val == null)
        {
            obj[key] = val;
        }
        else
        {
            if (typeof val.$type == 'string')
                obj[key] = deserialize(val);
            else if (Array.isArray(val))
                obj[key] = val.map(item => item == null ? item : deserialize(item));
            else
                obj[key] = val; // Might be some standard type 🤷
        }
    }

    return obj;
}

const jsonData = {
    $type: 'DataObject',
    items: [
        { $type: "Person", name: "Alice" },
        { $type: "Employee", age: 30 },
    ]
};
const testObj = deserialize<DataObject>(jsonData);

testObj.items.forEach(item => item.log());

This will output correctly:

Name: Alice
Age: 30

Deserializing concrete types from an abstract list in TypeScript (serialized in JSON.NET)

Answer №1

Similar questions

Guide to aligning a component in the middle of the screen - Angular

The functionality of d3 transition is currently non-existent

Angular 2 template can randomly display elements by shuffling the object of objects

Observable - initiating conditional emission

Easily Organize Your Data with Kendo React Grid: Rearrange Columns and Preserve Your Custom Layout

Ways to modify the access control to permit origin on a specific API URL in React

What is the best way to interact with the member variables and methods within the VideoJs function in an Angular 2 project

Can classes be encapsulated within a NgModule in Angular 2/4?

"Encountering a 500 error on Chrome and Internet Explorer while trying to sign

Tips for refreshing the value of a dependency injection token

Exploring Angular 2: Incorporating multiple HTML pages into a single component

Having trouble assigning a value of `undefined` to a TextField state in React hook

Coding with Angular 4 in JavaScript

The issue with launching a Node.js server in a production environment

Angular directive to delete the last character when a change is made via ngModel

What improvements can I make to enhance my method?

Using the hash(#) symbol in Vue 3 for routing

What could be the reason for the failure of my class isInstance() check

How can I turn off the draggable feature for a specific element in react-beautiful-dnd?

Function 'Once' in Typescript with Generics