up vote 15 down vote favorite
8

I know how to parse a JSON String and turn it into a JavaScript Object. You can use eval() or jQuery.parseJSON().

That's great, but how can I take that JavaScript Object and turn it into a particular JavaScript Object (i.e. with a certain prototype)?

For example, suppose you have:

function Foo()
{
   this.a = 3;
   this.b = 2;
   this.test = function() {return this.a*this.b;};
}
var fooObj = new Foo();
alert(fooObj.test() ); //Prints 6
var fooJSON = jQuery.parseJSON({"a":4, "b": 3});
//Something to convert fooJSON into a Foo Object
//....... (this is what I am missing)
alert(fooJSON.test() ); //Prints 12

Again, I am not wondering how to convert a JSON string into a generic JavaScript Object. I want to know how to convert a JSON string into a "Foo" Object. That is, my Object should now have a function 'test' and properties 'a' and 'b'.

UPDATE After doing some research, I thought of this...

function Object.cast(rawObj, constructor)
{
    var obj = new constructor();
    for(var i in rawObj)
        obj.i = rawObj.i;
    return obj;
}
var fooJSON = Object.cast(jQuery.parseJSON({"a":4, "b": 3}), Foo);

Will that work?

share|improve this question
Please, consider choosing one answer as the better solution... – Gabriel Llamas May 4 '11 at 8:08
feedback

4 Answers

up vote 10 down vote accepted

See an example below (this example uses the native JSON object). My changes are commented in CAPITALS:

function Foo(obj) // CONSTRUCTOR CAN BE OVERLOADED WITH AN OBJECT
{
    this.a = 3;
    this.b = 2;
    this.test = function() {return this.a*this.b;};

    // IF AN OBJECT WAS PASSED THEN INITIALISE PROPERTIES FROM THAT OBJECT
    for (var prop in obj) this[prop] = obj[prop];
}

var fooObj = new Foo();
alert(fooObj.test() ); //Prints 6

// INITIALISE A NEW FOO AND PASS THE PARSED JSON OBJECT TO IT
var fooJSON = new Foo(JSON.parse('{"a":4,"b":3}'));

alert(fooJSON.test() ); //Prints 12
share|improve this answer
I like this implementation. It works in all browsers, as well. – BMiner May 3 '11 at 18:21
I suppose you could do the "opposite" of this, as well. Construct a blank Foo Object and copy the properties from fooJSON into the new Foo Object. Finally, set fooJSON to point to the Foo Object. – BMiner May 3 '11 at 18:26
1  
This is very dangerous. If the obj has an attribute that is not in Foo definition, you will create a Foo object with an extra hidden property that you don't know its name... Instead of a loop I will simply do: this.a = obj.a and this.b = obj.b. Or directly I would pass "a" and "b" as parameters: new Foo (obj.a, obj.b) – Gabriel Llamas May 3 '11 at 18:29
@GagleKas I wouldn't say dangerous. Hidden properties would be OK as long as you are aware of their existence. I am just trying to implement basic Object deserialization of a JSON Object. – BMiner May 3 '11 at 18:35
1  
GagleKas's advice is worth listening to. (Although "very dangerous" is a little OTT.) The example is above is just to give you an idea. The correct implementation will depend on your application. – Oliver Moran May 3 '11 at 18:37
show 2 more comments
feedback
up vote 6 down vote

A blog post that I found useful: Understanding JavaScript Prototypes

You can mess with the __proto__ property of the Object.

var fooJSON = jQuery.parseJSON({"a":4, "b": 3});
fooJSON.__proto__ = Foo.prototype;

This allows fooJSON to inherit the Foo prototype.

I don't think this works in IE, though... at least from what I've read.

share|improve this answer
1  
Actually, something like that was my first instinct. – Oliver Moran May 3 '11 at 18:41
feedback
up vote 1 down vote

I liked your idea, Oliver. How about this?

function Object.cast(rawObj, constructor)
{
    var obj = new constructor();
    for(var i in rawObj)
        obj.i = rawObj.i;
    return obj;
}
var fooJSON = Object.cast(jQuery.parseJSON({"a":4, "b": 3}), Foo);
share|improve this answer
Please, if you want to answer your question edit the question! – Gabriel Llamas May 3 '11 at 18:40
You're right. My apologies. – BMiner May 5 '11 at 4:34
feedback
up vote 7 down vote

Do you want to add JSON serialization/deserialization functionality, right? Then look at this:

You want to achieve this:

UML

toJson() is a normal method.
fromJson() is a static method.

Implementation:

var Book = function (title, author, isbn, price, stock){
    this.title = title;
    this.author = author;
    this.isbn = isbn;
    this.price = price;
    this.stock = stock;

    this.toJson = function (){
        return ("{" +
            "\"title\":\"" + this.title + "\"," +
            "\"author\":\"" + this.author + "\"," +
            "\"isbn\":\"" + this.isbn + "\"," +
            "\"price\":" + this.price + "," +
            "\"stock\":" + this.stock +
        "}");
    };
};

Book.fromJson = function (json){
    var obj = JSON.parse (json);
    return new Book (obj.title, obj.author, obj.isbn, obj.price, obj.stock);
};

Usage:

var book = new Book ("t", "a", "i", 10, 10);
var json = book.toJson ();
alert (json); //prints: {"title":"t","author":"a","isbn":"i","price":10,"stock":10}

var book = Book.fromJson (json);
alert (book.title); //prints: t

Note: If you want you can change all property definitions like this.title, this.author, etc by var title, var author, etc. and add getters to them to accomplish the UML definition.

share|improve this answer
1  
I agree. This implementation will definitely work, and it's great... just a little wordy and specific to the Book Object. IMHO, the power of JS comes from prototypes and the ability to have some extra properties if you want to. That's all I'm sayin'. I was really looking for the one-liner: x.__proto__ = X.prototype; (although it's not IE browser compatible at this time) – BMiner May 3 '11 at 18:56
1  
Don't forget that your toJson() method - regardless of whether it has individual properties hardcoded or uses a for each - will need to add backslash escape codes for some characters that could be in each string property. (A book title might have quotation marks, for example.) – nnnnnn May 4 '11 at 2:32
Yes, I know, my answer was an example and the best answer for the question, but... not even a positive point... I don't know why I waste my time helping others – Gabriel Llamas May 5 '11 at 13:45
1  
I really appreciated your response and opinion, so you get the +1. It was definitely helpful; unfortunately, it isn't quite the best answer. Thanks! – BMiner May 13 '11 at 18:38
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.