serialize javascript object and deserialize it

Question

I have javascript getter setter class

function UserContext() {
    var category_id;
    var biller_id;

    this.get_category_id = function () {
        return category_id;
    }
    this.set_category_id = function (value) {
        category_id = value;
    }

    this.get_biller_id = function () {
        return biller_id;
    }
    this.set_biller_id = function (value) {
        biller_id = value;
    }
}

I am creating object of this class in jquery click event

var contextObj = new UserContext();
contextObj.set_category_id('SOME VALUE');
contextObj.set_biller_id('65');

I have similar class in c#

public class CustomerDTO
{
    public string category_id { get; set; }
    public string biller_id{ get; set; }
}

And one asp:hidden element

<asp:HiddenField ID="hdnValue" ClientIDMode="Static" runat="server" />

What i want to achieve

1. Assign contextObj to asp:hidden element by serializing (may be in json format)
2. In Code behind get this object desrailize it and assign the values to its respective c# class i.e CustomerDTO
3. So that i can access all these values through out all pages request (By Passing this object in Server.Transfer request)

To serialize object i tried this

console.log(JSON.stringify(contextObj));

But it prints nothing. I want value to get printed so that i can assign to hidden variable

Answer 1

You have wrong syntax. The problem is that your variables are private, and they will not be accessible by the stringify() function. In fact if you try to access a private variable directly you will get 'undefined'.

Serialization works only on the public members, and that makes sense, since the private variables are not accessible.

This should work as a quick hack, but it makes your variables public (as soon as you use this.category_id = value), so it is breaking encapsulation which is not good:

function UserContext() {
  this.category_id;
  this.biller_id;

  this.get_category_id = function() {
    return this.category_id;
  }
  this.set_category_id = function(value) {
    this.category_id = value;
  }

  this.get_biller_id = function() {
    return this.biller_id;
  }
  this.set_biller_id = function(value) {
    this.biller_id = value;
  }
}

var contextObj = new UserContext();
contextObj.set_category_id('SOME VALUE');
contextObj.set_biller_id('65');

alert(JSON.stringify(contextObj));

A better approach would be to keep category_id and biller_id really private, and still be able to serialize your object. You con do that by implementing the ToJson() method in your object, and specifying explicitly what you want to serialize:

function UserContext() {
  var category_id;
  var biller_id;

  this.get_category_id = function() {
    return category_id;
  }
  this.set_category_id = function(value) {
    category_id = value;
  }

  this.get_biller_id = function() {
    return biller_id;
  }
  this.set_biller_id = function(value) {
    biller_id = value;
  }
  
  this.toJSON = function() {
        return {
            "category_id": category_id,
            "biller_id": biller_id
        };
    };
}

var contextObj = new UserContext();
contextObj.set_category_id('SOME VALUE');
contextObj.set_biller_id('65');

alert(JSON.stringify(contextObj));

As a result, your variables are only accessible through your setters and getters, and you are also able to serialize your object using your private members! i would call that a Win-Win situation!

Answer 2

Javascript serializer does not use setter and getter as C# does. To have your attributes converted they need to be exposed and set into your class.

function UserContext() {
    this.category_id = null;
    this.biller_id = null;

    this.get_category_id = function () {
        return category_id;
    }
    this.set_category_id = function (value) {
        category_id = value;
    }

    this.get_biller_id = function () {
        return biller_id;
    }
    this.set_biller_id = function (value) {
        biller_id = value;
    }
}

then it should add attributes correctly to your json:

var contextObj = new UserContext();
console.log(JSON.stringify(contextObj ));

Answer 3

Change your code to :

function UserContext() {
    var category_id;
    var biller_id;

    this.get_category_id = function () {
        return this.category_id;
    }
    this.set_category_id = function (value) {
        this.category_id = value;
    }

    this.get_biller_id = function () {
        return this.biller_id;
    }
    this.set_biller_id = function (value) {
        this.biller_id = value;
    }
    }

Don't do this as other suggested :

 this.category_id = "";
  this.biller_id = "";

These meant to be private. keep them like that.

Answer 4

I think this way of function definition looks fine
function UserContext() {
  var category_id = "";
  var biller_id = "";

  this.get_category_id = function() {
    return this.category_id;
  }
  this.set_category_id = function(value) {
    this.category_id = value;
  }

  this.get_biller_id = function() {
    return this.biller_id;
  }

alert(JSON.stringify(contextObj));//now check in alert for out put
  this.set_biller_id = function(value) {
    this.biller_id = value;
  }
}


var contextObj = new UserContext();
contextObj.set_category_id('Delhi');
contextObj.set_biller_id('43');