JSON stringify and then parse works unexpectedly for the object with local variable

Question

Why JSON stringify and then parse is not working for this object. Is it works bad for objects with local variables?

function Task(description) {
    var _description = description;

    this.getDescription = function() {
        return _description;
    }
}

var task = new Task('wash car');
console.log(task.getDescription());
var json = JSON.stringify(task);
console.log(JSON.parse(json).getDescription());

you can't parse a string into an object that has functions. how would it know the difference between two objects with the same field names? — DLeh, Apr 09 '15 at 18:59
When you JSON.stringify an object, functions are omitted. Not to mention, all references are destroyed, so it will no longer be an instance of `Task` — Kevin B, Apr 09 '15 at 19:01
I need to save object in localstorage and then to get it. How I can achieve this? — , Apr 09 '15 at 19:07
http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage just follow that link — Tharin Meggett II, Apr 09 '15 at 19:14
@TharinMeggettII `task` is more than a simple object, which is why json.stringify and json.parse alone isn't enough to solve this problem. After stringifying `task` all you will have is `"{}"` — Kevin B, Apr 09 '15 at 19:22
@KevinB I get what you're saying after fooling around with the code. You're right — Tharin Meggett II, Apr 09 '15 at 19:25

Adolfo Diaz · Accepted Answer · 2015-04-09T19:17:39.343

JSON can't stringify functions (and it's not supposed to be able to).

But technically when you need to Stringify an object you should not need the functions. You can just pass the object as is within your application.

EDIT:

If what you need is the object to be stored locally then saving the functions along with it would not be a good idea anyway. What you can do is store the properties of the object and create a new instance when you retrieve it.

Kevin B · Answer 2 · 2015-04-09T19:26:11.863

It isn't possible to stringify an instance of a constructor and for it to still be an instance of the constructor after turning it back into an object.

Instead, you would need to give the Task instance a method that outputs a json string that you can store, then when you want it to be an instance of Task again, you can create a new instance.

function Task(description) {
    var _description = description;

    this.getDescription = function() {
        return _description + '(possibly modified?)';
    }

    this.stringify = function () {
        return JSON.stringify({
            description: this.getDescription(), 
            _description: _description
        });
    }

}

var task = new Task('wash car');
console.log(task.getDescription()); // 'wash car (possibly modified?)'
var json = task.stringify();
console.log(json); // {"description": "wash car (possibly modified?)", "_description": "wash car"}
var taskAgain = new Task(JSON.parse(json)._description);
console.log(taskAgain.getDescription());  // 'wash car (possibly modified?)'

I added the " (possibly modified?)" to demonstrate why it is important to pass both the result of getDescription and the string stored in _description. if getDescription never changes the description, there is no need to have getDescription in the first place which greatly simplifies this whole process.

function Task(description) {
    this.description = description;
}

var task = new Task('wash car');
console.log(task.description); // wash car
var json = JSON.stringify(task);
console.log(json); // {"description": "wash car"}
console.log(JSON.parse(json).description); // wash car
var taskAgain = new Task(JSON.parse(json).description);
console.log(task.description); // wash car

JSON stringify and then parse works unexpectedly for the object with local variable

2 Answers2