Typescript: How to deserialize JSON object with private variables?

Question

I have the following typescript model object user

export class User {

constructor(
    private _name: string,
    private _email: string
)  {}


public get name():string {
    return this._name;
}

public set name(value:string) {
    this._name = value;
}

get email():string {
    return this._email;
}

set email(value:string) {
    this._email = value;
}

}

I store the object via this code:

let user = new User('myName', 'myEmail');
localStorage.setItem('user', JSON.stringify(user));

If I look into the local storage there is the following string:

{"_name":"myName","_email":"myEmail"}

How do I get the user object again?

let user: User = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // logs undefined. Should log 'myName'
console.log(user._name); // this logs 'myName'. But according to the typescript documentation this should NOT work!

I guess this has something to to with the underscores the object is stored with. How can I receive the object correctly?

JSON.parse returns plain js object (not of type User). You should create User instance manually and initialize it. This might be helpful. — Aleksey L.
– Aleksey L., Commented Jul 15, 2016 at 16:34

Maxx · Accepted Answer · 2016-07-15 14:04:02Z

You need to implement some serialize and deserialize methods in your model.

class User {
    static public deserialize(serialized) {
        const {name, email} = JSON.parse(serialized);
        return new User(name, email);
    }    

    constructor(
        private _name: string,
        private _email: string
    )  {}


    public get name():string {
        return this._name;
    }

    public set name(value:string) {
        this._name = value;
    }

    get email():string {
        return this._email;
    }

    set email(value:string) {
        this._email = value;
    }

    public serialize() {
        return JSON.stringify({name: this.name, email: this.email});
    }

}

let user = new User('myName', 'myEmail');
localStorage.setItem('user', user.serialize());

let user1: User = User.deserialize(localStorage.getItem('user'));

johnnyBoy · Accepted Answer · 2022-06-01 21:51:36Z

0

Thanks to this answer to another post, I came up with this solution based on JSON.parse()'s reviver parameter:

const data = JSON.parse(json, function (key, value) {
    if (key.startsWith('_')) {
        this[key.slice(1)] = value
        return
    }
    return value
})

This works the other way around too with JSON.stringify()'s replacer parameter.

Note that the callback won't work with an arrow function since they don't have their own binding to this

answered Jun 1, 2022 at 21:51

johnnyBoy

1252 silver badges13 bronze badges

Collectives™ on Stack Overflow

Typescript: How to deserialize JSON object with private variables?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related