How do I initialize a TypeScript Object with a JSON-Object

Question

I receive a JSON object from an AJAX call to a REST server  This object has property names that match my TypeScript class  this is a follow-on to this question    What is the best way to initialize it  I don t think this will work because the class   amp  JSON object  have members that are lists of objects and members that are classes  and those classes have members that are lists and or classes   But I d prefer an approach that looks up the member names and assigns them across  creating lists and instantiating classes as needed  so I don t have to write explicit code for every member in every class  there s a LOT

User · Answer

the best I found for this purpose is the class-transformer. github.com/typestack/class-transformer

That's how you use it:

Some class:

export class Foo {

    name: string;

    @Type(() => Bar)
    bar: Bar;

    public someFunction = (test: string): boolean => {
        ...
    }
}


import { plainToClass } from 'class-transformer';

export class SomeService {

  anyFunction() {
u = plainToClass(Foo, JSONobj);
 }

If you use the @Type decorator nested properties will be created, too.

User · Answer

Another option using factories  export class A        id  number       date  Date       bId  number      readonly b  B     export class B        id  number     export class AFactory        constructor          private readonly createB  BFactory                create data  any   A            const createB   this createB create           return Object assign new A                data                                get b    B                        return createB   id  data bId                                        date  new Date data date                           export class BFactory        create data  any   B            return Object assign new B    data             https   github com MrAntix ts-deserialize  use like this  import   A  B  AFactory  BFactory   from    deserialize       create a factory  simplified by DI const aFactory   new AFactory new BFactory         get an anon js object like you d get from the http call const data     bId  1  date   2017-1-1         create a real model from the anon js object const a   aFactory create data       confirm instances e g  dates are Dates  console log  a date is instanceof Date   a date instanceof Date   console log  a b is instanceof B   a b instanceof B      keeps your classes simple injection available to the factories for flexibility

User · Answer

model ts   export class Item       private key  JSON      constructor jsonItem  any            this key   jsonItem             service ts   import   Item   from     model items    export class ItemService       items  Item      constructor             this items   new Item                logo    Logo                home    Home                about    About                contact    Contact                         getItems    Item           return this items

User · Answer

This is my approach  very simple   const jsonObj     key  string   any     JSON parse jsonStr    for  const key in jsonObj      if   jsonObj hasOwnProperty key         continue         console log key      Key   console log jsonObj key       Value      Your logic

User · Answer

JQuery  extend does this for you   var mytsobject   new mytsobject     var newObj    a 1 b 2      extend mytsobject  newObj     mytsobject will now contain a  amp  b

User · Answer

I ve created a tool that generates TypeScript interfaces and a runtime  type map  for performing runtime typechecking against the results of JSON parse  ts quicktype io  For example  given this JSON        name    David      pets                  name    Smoochie          species    rhino                quicktype produces the following TypeScript interface and type map   export interface Person       name  string      pets  Pet       export interface Pet       name     string      species  string     const typeMap  any         Person            name   string           pets  array object  Pet                Pet            name   string           species   string               Then we check the result of JSON parse against the type map   export function fromJson json  string   Person       return cast JSON parse json   object  Person         I ve left out some code  but you can try quicktype for the details

User · Answer

My approach is slightly different  I do not copy properties into new instances  I just change the prototype of existing POJOs  may not work well on older browsers   Each class is responsible for providing a SetPrototypes method to set the prototoypes of any child objects  which in turn provide their own SetPrototypes methods   I also use a  Type property to get the class name of unknown objects but that can be ignored here  class ParentClass       public ID   Guid      public Child   ChildClass      public ListOfChildren   ChildClass                    Set the prototypes of all objects in the graph         Used for recursive prototype assignment on a graph via ObjectUtils SetPrototypeOf          param pojo Plain object received from API JSON to be given the class prototype              private static SetPrototypes pojo  ParentClass   void               ObjectUtils SetPrototypeOf pojo Child  ChildClass           ObjectUtils SetPrototypeOfAll pojo ListOfChildren  ChildClass            class ChildClass       public ID   Guid      public GrandChild   GrandChildClass                  Set the prototypes of all objects in the graph         Used for recursive prototype assignment on a graph via ObjectUtils SetPrototypeOf          param pojo Plain object received from API JSON to be given the class prototype              private static SetPrototypes pojo  ChildClass   void               ObjectUtils SetPrototypeOf pojo GrandChild  GrandChildClass            Here is ObjectUtils ts         ClassType lets us specify arguments as class variables      where ClassType    window ClassName       type ClassType     new    args  any     any             The name of a class as opposed to the class itself      where ClassType    window ClassName       type ClassName   string  amp       abstract class ObjectUtils          Set the prototype of an object to the specified class        Does nothing if source or type are null     Throws an exception if type is not a known class type        If type has the SetPrototypes method then that is called on the source    to perform recursive prototype assignment on an object graph        SetPrototypes is declared private on types because it should only be called    by this method  It does not  and must not  set the prototype of the object    itself - only the protoypes of child properties  otherwise it would cause a    loop  Thus a public method would be misleading and not useful on its own         https   stackoverflow com questions 9959727 proto-vs-prototype-in-javascript     public static SetPrototypeOf source  any  type  ClassType   ClassName   any       let classType    typeof type      quot string quot     window type    type       if   source     classType                return source                Guard contract utility     ExGuard IsValid classType prototype   quot type quot    lt any gt type        if    lt any gt Object  setPrototypeOf                  lt any gt Object  setPrototypeOf source  classType prototype             else if  source   proto                  source   proto     classType prototype   proto               if  typeof classType  quot SetPrototypes quot        quot function quot                 classType  quot SetPrototypes quot   source              return source            Set the prototype of a list of objects to the specified class         Throws an exception if type is not a known class type      public static SetPrototypeOfAll source  any    type  ClassType   void       if   source                return             for  var i   0  i  lt  source length  i                  this SetPrototypeOf source i   type              Usage  let pojo   SomePlainOldJavascriptObjectReceivedViaAjax   let parentObject   ObjectUtils SetPrototypeOf pojo  ParentClass       parentObject is now a proper ParentClass instance

User · Answer

The 4th option described above is a simple and nice way to do it  which has to be combined with the 2nd option in the case where you have to handle a class hierarchy like for instance a member list which is any of a occurences of subclasses of a Member super class  eg Director extends Member or Student extends Member  In that case you have to give the subclass type in the json format

User · Answer

TLDR  TypedJSON  working proof of concept     The root of the complexity of this problem is that we need to deserialize JSON at runtime using type information that only exists at compile time  This requires that type-information is somehow made available at runtime   Fortunately  this can be solved in a very elegant and robust way with decorators and ReflectDecorators    Use property decorators on properties which are subject to serialization  to record metadata information and store that information somewhere  for example on the class prototype Feed this metadata information to a recursive initializer  deserializer     nbsp   Recording Type-Information  With a combination of ReflectDecorators and property decorators  type information can be easily recorded about a property  A rudimentary implementation of this approach would be   function JsonMember target  any  propertyKey  string        var metadataFieldKey      propertyTypes             Get the already recorded type-information from target  or create        empty object if this is the first property      var propertyTypes   target metadataFieldKey      target metadataFieldKey                 Get the constructor reference of the current property         This is provided by TypeScript  built-in  make sure to enable emit        decorator metadata       propertyTypes propertyKey    Reflect getMetadata  design type   target  propertyKey       For any given property  the above snippet will add a reference of the constructor function of the property to the hidden   propertyTypes   property on the class prototype  For example   class Language        JsonMember    String     name  string        JsonMember   Number     level  number     class Person        JsonMember    String     name  string        JsonMember   Language     language  Language      And that s it  we have the required type-information at runtime  which can now be processed    nbsp   Processing Type-Information  We first need to obtain an Object instance using JSON parse -- after that  we can iterate over the entires in   propertyTypes    collected above  and instantiate the required properties accordingly  The type of the root object must be specified  so that the deserializer has a starting-point   Again  a dead simple implementation of this approach would be   function deserialize lt T gt  jsonObject  any  Constructor    new     T     T       if   Constructor     Constructor prototype   propertyTypes       jsonObject    typeof jsonObject      object                No root-type with usable type-information is available          return jsonObject                Create an instance of root-type      var instance  any   new Constructor            For each property marked with  JsonMember  do        Object keys Constructor prototype   propertyTypes    forEach propertyKey   gt            var PropertyType   Constructor prototype   propertyTypes   propertyKey               Deserialize recursively  treat property type as root-type          instance propertyKey    deserialize jsonObject propertyKey   PropertyType                return instance      var json       name    John Doe    language      name    en    level   5       var person  Person   deserialize JSON parse json   Person     The above idea has a big advantage of deserializing by expected types  for complex object values   instead of what is present in the JSON  If a Person is expected  then it is a Person instance that is created  With some additional security measures in place for primitive types and arrays  this approach can be made secure  that resists any malicious JSON    nbsp   Edge Cases  However  if you are now happy that the solution is that simple  I have some bad news  there is a vast number of edge cases that need to be taken care of  Only some of which are    Arrays and array elements  especially in nested arrays  Polymorphism Abstract classes and interfaces       If you don t want to fiddle around with all of these  I bet you don t   I d be glad to recommend a working experimental version of a proof-of-concept utilizing this approach  TypedJSON -- which I created to tackle this exact problem  a problem I face myself daily   Due to how decorators are still being considered experimental  I wouldn t recommend using it for production use  but so far it served me well

User · Answer

For simple objects  I like this method   class Person     constructor      public id  String       public name  String       public title  String         static deserialize input any   Person       return new Person input id  input name  input title          var person   Person deserialize  id   P123   name   Bob   title   Mr       Leveraging the ability to define properties in the constructor lets it be concise   This gets you a typed object  vs all the answers that use Object assign or some variant  which give you an Object  and doesn t require external libraries or decorators

User · Answer

I ve been using this guy to do the job  https   github com weichx cerialize  It s very simple yet powerful  It supports    Serialization  amp  deserialization of a whole tree of objects  Persistent  amp  transient properties on the same object  Hooks to customize the  de serialization logic  It can  de serialize into an existing instance  great for Angular  or generate new instances  etc    Example   class Tree      deserialize public species   string      deserializeAs Leaf  public leafs   Array lt Leaf gt      arrays do not need extra specifications  just a type     deserializeAs Bark   barkType   public bark   Bark     using custom type and custom key name    deserializeIndexable Leaf  public leafMap     idx   string    Leaf     use an object as a map    class Leaf      deserialize public color   string     deserialize public blooming   boolean     deserializeAs Date  public bloomedAt   Date     class Bark      deserialize roughness   number     var json       species   Oak     barkType    roughness  1      leafs     color   red   blooming  false  bloomedAt   Mon Dec 07 2015 11 48 20 GMT-0500  EST          leafMap    type1    some leaf data    type2    some leaf data       var tree  Tree   Deserialize json  Tree

User · Answer

Maybe not actual  but simple solution   interface Bar  x number  y  string      var baz Bar   JSON parse jsonString   alert baz y     work for difficult dependencies too

User · Answer

Option  5  Using Typescript constructors and jQuery extend  This seems to be the most maintainable method  add a constructor that takes as parameter the json structure  and extend the json object  That way you can parse a json structure into the whole application model   There is no need to create interfaces  or listing properties in constructor   export class Company       Employees   Employee         constructor  jsonData  any                 jQuery extend  this  jsonData               apply the same principle to linked objects          if   jsonData Employees               this Employees   jQuery map  jsonData Employees    emp    gt                    return new Employee   emp                    calculateSalaries     void             export class Employee       name  string      salary  number      city  string       constructor  jsonData  any                 jQuery extend  this  jsonData               case where your object s property does not match the json s          this city   jsonData town            In your ajax callback where you receive a company to calculate salaries   onReceiveCompany  jsonCompany   any         let newCompany   new Company  jsonCompany           call the methods on your newCompany object        newCompany calculateSalaries

User · Answer

you can do like below  export interface Instance     id  string    name  string    type string      and   var instance  Instance    lt Instance gt          id  null        name            type

User · Answer

you can use Object assign I don t know when this was added  I m currently using Typescript 2 0 2  and this appears to be an ES6 feature   client fetch       then  response   gt            return response json            then  json   gt            let hal   HalJson   Object assign  new HalJson    json            log debug   json   hal      here s HalJson  export class HalJson        links  HalLinks     export class HalLinks implements Links      export interface Links       readonly  text  string   Link     export interface Link       readonly href  URL      here s what chrome says it is  HalJson   links  Object   links   Object public   Object href    http   localhost 9000 v0 public   so you can see it doesn t do the assign recursively

User · Answer

I personally prefer option  3 of  Ingo B  rk  And I improved his codes to support an array of complex data and Array of primitive data   interface IDeserializable     getTypes    Object     class Utility     static deserializeJson lt T gt  jsonObj  object  classType  any   T       let instanceObj   new classType        let types  IDeserializable      if  instanceObj  amp  amp  instanceObj getTypes          types   instanceObj getTypes               for  var prop in jsonObj          if    prop in instanceObj             continue                 let jsonProp   jsonObj prop         if  this isObject jsonProp             instanceObj prop              types  amp  amp  types prop                this deserializeJson jsonProp  types prop                 jsonProp          else if  this isArray jsonProp             instanceObj prop                for  let index   0  index  lt  jsonProp length  index                const elem   jsonProp index             if  this isObject elem   amp  amp  types  amp  amp  types prop                 instanceObj prop  push this deserializeJson elem  types prop                 else               instanceObj prop  push elem                                 else           instanceObj prop    jsonProp                     return instanceObj            region     get types                check type of value be string       param     value         static isString value  any        return typeof value      string     value instanceof String                  check type of value be array       param     value         static isNumber value  any        return typeof value      number   amp  amp  isFinite value                   check type of value be array       param     value         static isArray value  any        return value  amp  amp  typeof value      object   amp  amp  value constructor     Array                  check type of value be object       param     value         static isObject value  any        return value  amp  amp  typeof value      object   amp  amp  value constructor     Object                  check type of value be boolean       param     value         static isBoolean value  any        return typeof value      boolean            endregion        region     Models     class Hotel implements IDeserializable     id  number   0    name  string         address  string         city  City   new City       complex data   roomTypes  Array lt RoomType gt           array of complex data   facilities  Array lt string gt           array of primitive data       getter example   get nameAndAddress         return    this name    this address              function example   checkRoom         return true            this function will be use for getting run-time type information   getTypes         return         city  City        roomTypes  RoomType               class RoomType implements IDeserializable     id  number   0    name  string         roomPrices  Array lt RoomPrice gt              getter example   get totalPrice         return this roomPrices map x   gt  x price  reduce  a  b    gt  a   b  0          getTypes         return         roomPrices  RoomPrice               class RoomPrice     price  number   0    date  string          class City     id  number   0    name  string             endregion      region     test code     var jsonObj       id  1    name   hotel1     address   address1     city        id  1      name   city1         roomTypes                id  1        name   single         roomPrices                        price  1000            date   2020-02-20                                 price  1500            date   2020-02-21                                       id  2        name   double         roomPrices                        price  2000            date   2020-02-20                                 price  2500            date   2020-02-21                                 facilities    facility1    facility2       var hotelInstance   Utility deserializeJson lt Hotel gt  jsonObj  Hotel    console log hotelInstance city name   console log hotelInstance nameAndAddress      getter console log hotelInstance checkRoom        function console log hotelInstance roomTypes 0  totalPrice      getter     endregion

User · Answer

These are some quick shots at this to show a few different ways  They are by no means  complete  and as a disclaimer  I don t think it s a good idea to do it like this  Also the code isn t too clean since I just typed it together rather quickly   Also as a note  Of course deserializable classes need to have default constructors as is the case in all other languages where I m aware of deserialization of any kind  Of course  Javascript won t complain if you call a non-default constructor with no arguments  but the class better be prepared for it then  plus  it wouldn t really be the  typescripty way     Option  1  No run-time information at all  The problem with this approach is mostly that the name of any member must match its class  Which automatically limits you to one member of same type per class and breaks several rules of good practice  I strongly advise against this  but just list it here because it was the first  draft  when I wrote this answer  which is also why the names are  Foo  etc     module Environment       export class Sub           id  number             export class Foo           baz  number          Sub  Sub           function deserialize json  environment  clazz        var instance   new clazz        for var prop in json            if  json hasOwnProperty prop                 continue                     if typeof json prop       object                 instance prop    deserialize json prop   environment  environment prop              else               instance prop    json prop                        return instance     var json         baz  42      Sub            id  1337           var instance   deserialize json  Environment  Environment Foo   console log instance     Option  2  The name property  To get rid of the problem in option  1  we need to have some kind of information of what type a node in the JSON object is  The problem is that in Typescript  these things are compile-time constructs and we need them at runtime     but runtime objects simply have no awareness of their properties until they are set   One way to do it is by making classes aware of their names  You need this property in the JSON as well  though  Actually  you only need it in the json   module Environment       export class Member           private   name      Member           id  number             export class ExampleClass           private   name      ExampleClass            mainId  number          firstMember  Member          secondMember  Member           function deserialize json  environment        var instance   new environment json   name           for var prop in json            if  json hasOwnProperty prop                 continue                     if typeof json prop       object                 instance prop    deserialize json prop   environment             else               instance prop    json prop                        return instance     var json           name     ExampleClass       mainId  42      firstMember              name     Member           id  1337            secondMember              name     Member           id  -1           var instance   deserialize json  Environment   console log instance     Option  3  Explicitly stating member types  As stated above  the type information of class members is not available at runtime     that is unless we make it available  We only need to do this for non-primitive members and we are good to go   interface Deserializable       getTypes    Object     class Member implements Deserializable       id  number       getTypes                since the only member  id  is primitive  we don t need to            return anything here         return              class ExampleClass implements Deserializable       mainId  number      firstMember  Member      secondMember  Member       getTypes             return                  this is the duplication so that we have                run-time type information                firstMember  Member              secondMember  Member                     function deserialize json  clazz        var instance   new clazz            types   instance getTypes         for var prop in json            if  json hasOwnProperty prop                 continue                     if typeof json prop       object                 instance prop    deserialize json prop   types prop              else               instance prop    json prop                        return instance     var json         mainId  42      firstMember            id  1337            secondMember            id  -1           var instance   deserialize json  ExampleClass   console log instance     Option  4  The verbose  but neat way  Update 01 03 2016  As  GameAlchemist pointed out in the comments  idea  implementation   as of Typescript 1 7  the solution described below can be written in a better way using class property decorators   Serialization is always a problem and in my opinion  the best way is a way that just isn t the shortest  Out of all the options  this is what I d prefer because the author of the class has full control over the state of deserialized objects  If I had to guess  I d say that all other options  sooner or later  will get you in trouble  unless Javascript comes up with a native way for dealing with this    Really  the following example doesn t do the flexibility justice  It really does just copy the class s structure  The difference you have to keep in mind here  though  is that the class has full control to use any kind of JSON it wants to control the state of the entire class  you could calculate things etc     interface Serializable lt T gt        deserialize input  Object   T     class Member implements Serializable lt Member gt        id  number       deserialize input            this id   input id          return this           class ExampleClass implements Serializable lt ExampleClass gt        mainId  number      firstMember  Member      secondMember  Member       deserialize input            this mainId   input mainId           this firstMember   new Member   deserialize input firstMember           this secondMember   new Member   deserialize input secondMember            return this           var json         mainId  42      firstMember            id  1337            secondMember            id  -1           var instance   new ExampleClass   deserialize json   console log instance

[json] How do I initialize a TypeScript Object with a JSON-Object?

Examples related to json

Examples related to typescript