CODEWITHSUNDEEP
jsonangularinheritancetypescript
Bünyamin Sarıgül
Bünyamin Sarıgül

Reputation: 3091

Angular2 & Typescript - Create object from nested JSON

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?

Upvotes: 0

Views: 1098

Answers (1)

thitemple
thitemple

Reputation: 6059

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

Upvotes: 1

Related Questions