Angular2 & Typescript - Create object from nested JSON

Question

I have a class which has multiple interfaces inside of it to model a JSON data. For example:

interface A {
   id: number;
}

interface B {
   name: string;
   surname?: string;
}

class MyClass implements A {
  people: B[];
  notes: string[];

  function1(){...}
  function2(){...}
}

And I have a JSON in the same structure:

{
  id: 1,
  people: [
    {
      name: "john"
    },
    {
      name: "alice",
      surname: "smith"
    }
  ],
  notes: [ "Very important top secret note" ]
}

Can I create an instance of MyClass from this JSON directly?

thitemple · Accepted Answer · 2017-02-08 14:55:24Z

1

Your data structure is almost the same as your class, you'd have to add an id property to the class

class MyClass implements A {
    id: number;
    // ....
}

The problem is if you were trying to do something like this:

let data: MyClass = {
  id: 1,
  people: [
    {
      name: "john"
    },
    {
      name: "alice",
      surname: "smith"
    }
  ],
  notes: [ "Very important top secret note" ]
}

This won't work because your json does not have the methods (function1, function2).

One solution would be to really instantiate the MyClass and pass the json, or have a constructor method for that like

class MyClass {
    static createFrom(jsonData: A & B): MyClass {
       // create the objct and return
    }
}

Or, you could create a variable of that type by combining an existing instance of the class and spreading the json.

Like so:

let json = {
    id: 1,
    people: [
        {
            name: "john"
        },
        {
            name: "alice",
            surname: "smith"
        }
    ],
    notes: ["Very important top secret note"]
}
const c = new MyClass();

let mClass: MyClass = {...json, function1: c.function1, function2: c.function2 };

mClass.function1();

Link to playground

answered Feb 8, 2017 at 14:55

thitemple

6,0675 gold badges47 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bünyamin Sarıgül Over a year ago

First of all, A interface has the id field and MyClass implements it, should I declare it again? Secondly, I have much more interfaces/classes than this example, so initiating all of them with a constructor that takes json will take too much time. Lastly, I tried to create an instance of a class that have no methods as a: AClass = { ... } but when I did that, a instance of AClass returned false. Is the second method you suggested create a real instance of this class or is it just keeping it as json?

Collectives™ on Stack Overflow

Angular2 & Typescript - Create object from nested JSON

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related