JSON to TypeScript class instance? [duplicate]

by

This question is quite broad, so I’m going to give a couple of solutions.

Solution 1: Helper Method

Here’s an example of using a Helper Method that you could change to fit your needs:

class SerializationHelper {
    static toInstance<T>(obj: T, json: string) : T {
        var jsonObj = JSON.parse(json);

        if (typeof obj["fromJSON"] === "function") {
            obj["fromJSON"](jsonObj);
        }
        else {
            for (var propName in jsonObj) {
                obj[propName] = jsonObj[propName]
            }
        }

        return obj;
    }
}

Then using it:

var json = '{"name": "John Doe"}',
    foo = SerializationHelper.toInstance(new Foo(), json);

foo.GetName() === "John Doe";

Advanced Deserialization

This could also allow for some custom deserialization by adding your own fromJSON method to the class (this works well with how JSON.stringify already uses the toJSON method, as will be shown):

interface IFooSerialized {
    nameSomethingElse: string;
}

class Foo {
  name: string;
  GetName(): string { return this.name }

  toJSON(): IFooSerialized {
      return {
          nameSomethingElse: this.name
      };
  }

  fromJSON(obj: IFooSerialized) {
        this.name = obj.nameSomethingElse;
  }
}

Then using it:

var foo1 = new Foo();
foo1.name = "John Doe";

var json = JSON.stringify(foo1);

json === '{"nameSomethingElse":"John Doe"}';

var foo2 = SerializationHelper.toInstance(new Foo(), json);

foo2.GetName() === "John Doe";

Solution 2: Base Class

Another way you could do this is by creating your own base class:

class Serializable {
    fillFromJSON(json: string) {
        var jsonObj = JSON.parse(json);
        for (var propName in jsonObj) {
            this[propName] = jsonObj[propName]
        }
    }
}

class Foo extends Serializable {
    name: string;
    GetName(): string { return this.name }
}

Then using it:

var foo = new Foo();
foo.fillFromJSON(json);

There’s too many different ways to implement a custom deserialization using a base class so I’ll leave that up to how you want it.

More Related Contents:

  1. How do I cast a JSON Object to a TypeScript class?
  2. How do I initialize a TypeScript Object with a JSON-Object?
  3. .NET NewtonSoft JSON deserialize map to a different property name
  4. Importing JSON file in TypeScript
  5. How to import JSON File into a TypeScript file?
  6. How can I deserialize JSON with a top-level array using Serde?
  7. What is deserialize and serialize in JSON?
  8. How to get Date object from json Response in typescript
  9. Deserializing JSON using JSon.NET with dynamic data
  10. Ignore parsing errors during JSON.NET data parsing
  11. How to parse a JSON object to a TypeScript Object
  12. tsconfig.json: Build:No inputs were found in config file
  13. VB.net JSON Deserialize
  14. Angular: Typescript casting JSON response as object model not working
  15. Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes
  16. Convert two types into a single type with Serde
  17. Typescript `enum` from JSON string
  18. How to implement custom JsonConverter in JSON.NET?
  19. Binary Data in JSON String. Something better than Base64
  20. What is “406-Not Acceptable Response” in HTTP?
  21. Deserializing a JSON into a JavaScript object
  22. Convert Pandas DataFrame to JSON format
  23. Why struct fields are showing empty?
  24. HTTP POST with Json on Body – Flutter/Dart
  25. Decode JSON as it is still streaming in via net/http
  26. Is there an API call for changing user password on keycloak?
  27. Handle JSON Object in XMLHttp response in Excel VBA Code
  28. JSON single value parsing
  29. Very large HTTP request vs many small requests
  30. How to extract all the keys in a JSON object with BigQuery

Leave a Comment