JSON to Javascript Class

20,715

Solution 1

Just assign to an instance:

 static from(json){
   return Object.assign(new Student(), json);
 }

So you can do:

 const student = Student.from({ name: "whatever" });

Or make it an instance method and leave away the assignemnt:

 applyData(json) {
   Object.assign(this, json);
 }

So you can:

 const student = new Student;
 student.applyData({ name: "whatever" });

It could also be part of the constructor:

 constructor(options = {}) {
  Object.assign(this, options);
 }

Then you could do:

 const student = new Student({ name: "whatever" });

And also, if a property name has changed, let's say: lastname became LastName, I will have to fix it?

Yes you will have to fix that.

Solution 2

There is no way in javascript to deserialize json into classes. So I wrote a library ts-serializable that solves this problem.

import { jsonProperty, Serializable } from "ts-serializable";

export class User extends Serializable {

    @jsonProperty(String)
    public firstName: string = ''; // default value necessarily

    @jsonProperty(String, void 0)
    public lastName?: string = void 0; // default value necessarily

    @jsonProperty(Date)
    public birthdate: Date = new Date(); // default value necessarily

    public getFullName(): string {
        return [
            this.firstName,
            this.lastName
        ].join(' ');
    }

    public getAge(): number {
        return new Date().getFullYear() - this.birthdate.getFullYear();
    }
}

const user: User = new User().fromJSON(json);
user.getFullName(); // work fine and return string
user.getAge(); // work fine and return number

// or
const user: User = User.fromJSON(json);
user.getFullName(); // work fine and return string
user.getAge(); // work fine and return number

The library also checks types during deserialization.

Share:
20,715
TSR
Author by

TSR

Updated on June 24, 2021

Comments

  • TSR
    TSR almost 3 years

    I have a http request that gets this Json object from a nosql database:

    let jsonBody = {
        birthday : 1997,
        firstname: 'foo',
        lastname:'bar'
    }
    

    Then I want to load this information into the Student model:

    class Student{
        constructor(){
    
        }
    
        getFullname(){
            return this.lastname+' '+this.firstname
        }
        getApproxAge(){
            return 2018- this.birthday
        }
    }
    

    Normally, I would add this method to this class:

    fromJson(json){
        this.studentId = json.studentId;
        this.birthday = json.birthday;
        this.firstname = json.firstname;
        this.lastname = json.lastname;
    }
    

    I would use it as follow:

    let student = new Student()
    student.fromJson(jsonBody)
    console.log(student.getFullname())
    console.log(student.getApproxAge())
    

    This works fine but my problem is I have: 100 proprieties in reality. Will I have to write all proprities one by one in the fromJson method?

    And also, if a propriety name has change, let's say: lastname became LastName, I will have to fix it?

    Is there a simpler way to just assign these values to the object student dynamically but keep all of its methods??

    Something like this:

    fromJson(json){
        this = Object.assign(this, json) //THIS IS NOT WORKING
    }
    
  • tensor
    tensor over 2 years
    this answer is correct but still it doesn't help me with code completion :(