Question

I am working on an app that heavily uses JavaScript. I am attempting to include some object-oriented practices. In this attempt, I have created a basic class like such:

function Item() { this.init(); }
Item.prototype = {
  init: function () {
    this.data = {
      id: 0,
      name: "",
      description: ""     
    }
  },

  save: function() {
    alert("Saving...");
    $.ajax({
      url: getUrl(),
      type: "POST",
      data: JSON.stringify(this.data),
      contentType: "application/json"
    });
  }
}

I am creating Item instances in my app and then saving them to local storage like such:

Item item = new Item();
window.localStorage.setItem("itemKey", JSON.stringify(item));

On another page, or at another time, I am retriving that item from local storage like such:

var item = window.localStorage.getItem("itemKey");
item = JSON.parse(item);
item.save();

Unfortunately, the “save” function does not seem to get reached. In the console window, there is an error that says:

*save_Click
(anonymous function)
onclick*

I have a hunch that the “(anonymous function)” is the console window’s way of saying “calling item.save(), but item is an anonymous type, so I am trying to access an anonymous function”. My problem is, I’m not sure how to convert “var item” into an Item class instance again. Can someone please show me?

Answer 1

Short answer:

Functions cannot be serialized into JSON.

Explanation:

JSON is a cross-platform serialization scheme based on a subset of JS literal syntax. This being the case, it can only store certain things. Per http://www.json.org/ :

• Objects: An object is an unordered set of name/value pairs. An object begins with { (left brace) and ends with } (right brace). Each name is followed by : (colon) and the name/value pairs are separated by , (comma).
• Arrays: An array is an ordered collection of values. An array begins with [ (left bracket) and ends with ] (right bracket). Values are separated by , (comma).
• values: A value can be a string in double quotes, or a number, or true or false or null, or an object or an array. These structures can be nested.

Functions cannot be serialized into JSON because another non-JS platform would not be able to unserialize and use it. Consider the example in reverse. Say I had a PHP object at my server which contained properties and methods. If I serialized that object with PHP’s json_encode() and methods were included in the output, how would my JavaScript ever be able to parse and understand PHP code in the methods, let alone use those methods?

What you are seeing in your resulting JSON is the toString() value of the function on the platform you’re using. The JSON serilizer calls toString() on anything being serialized which isn’t proper for JSON.

I believe your solution is to stop storing instances in JSON/local storage. Rather, save pertinent data for an instance which you set back to a new instance when you need.