Clever Geek Handbook

Package and unpack complex object architecture using JSON

I've been looking into the new HTML 5 repository and it's pretty cool so far. I decided to use JSON to serialize my objects to strings and to parse them back to objects, which sounds pretty good. However, this is easier said than done. I found that you can't just JSON.stringify()

an object and expect it to pack well for you, but I can't figure out what I should be doing instead.

That's not all, though: my object contains two arrays, each containing a different type of object and one of which is multidimensional. This is what my rather complex and interdependent object architecture looks like:

function Vector2(x, y) {
    this.x = x;
    this.y = y;
}

function Bar(ID, position) {
    this.id = id;
    this.position = position;
}

function Goo(state, position) {
    this.on = state;
    this.position = position;
}

function Foo(name, size) {
    this.name = name;
    this.size = size;
    this.bars = new Array(width)
    this.goos = new Array(10);

    this.Initialize();
}

Foo.prototype.Initialize() {
    for(var x = 0;x<this.size.x;x++) {
            this.bars[x] = new Array(this.size.y);

        for(var y=0;y<this.size.y;y++) {
            this.bars[x][y] = new Bar(x + y, new Vector2(x, y));
        }
    }

    for(var i = 0;i<this.goos.length;i++) {
        this.goos[i] = new Goo(on, new Vector2(i, i/2 + 1));
    }
}

Each of these objects has many additional features, each of which is added using the same prototype method that I used to add the method to Foo. As I said, difficult. My question is, how do I serialize the whole thing? Do I need to click on functions toJSON()

for each object?

Finally, once I have packed the whole thing and saved it in localstorage

, I know how to get it, but I hardly know how to unpack it using JSON. It's a different matter at a different time, though, and I suspect it might be a little easier to figure out on my own once I know how to package everything.

Note. I would normally not address such a potentially broad question, but I couldn't find anything here on SO or with my (admittedly weak) google-fu that actually solves the problem, and I don't know how to proceed with this question.

+3


source to share


4 answers


Usually you don't just serialize complex data structures in javascript, because normal serialization does not handle multiple differencing things, all have references to the same object, cannot handle circular references, etc.

Instead, I would recommend that you understand what the real state of your application is. Not the entire structure of object instances, but what is the minimum amount of information that is really needed to restore the state of your data. Then, once you figure it out (it should only be data, no real objects), you can create functions or methods to get that data from your data structures, or create a new data structure from the data.



When looking at the code, the actual state of the object Foo

is a two-dimensional array of objects Bar

and a one-dimensional array of objects Goo

and name

and size

. A Bar

only has x

, y

and id

. Goo just has state

both a x

and a y

. It would be pretty easy to write a way for Foo to generate and a method for Foo to take that state from stored storage.

+2


source


Using the JSON and fromJSON functions is probably the correct way. You should only store the actual unique data for any given object as JSON, it would be impractical to serialize the entire object instance for several reasons: 1 - that it is just unnecessary. Also, think about when you add or change functionality for one of your objects in the near future: clients that have kept their own serialized objects will never get your updates. Simply storing unique instance data and a function to convert that data back to a real object (using the most recent definition) is the way to go.



+1


source


You can wrap functions in strings:

var a = function() {return "a"};
a.toString()

// And also:

function b() {return "b"};
b.toString();

So from there you can hack the JSON source (by Douglas Crockford) and enable feature support. Or something.

0


source


I hope I'm not too late here, but I ran into the same problem.

I would like to store a promise object (returned via a JQuery AJAX call) to local storage.

Luckily, I stumbled upon a small Javascript library called Stash ( http://rezitech.github.io/stash/ ). This makes it both the serialization of complex Javascript objects to strings and the ability to parse a String into a Javascript object.

Best of all, you don't need to do serialization / parsing explicitly, because data types are automatically recognized and converted when you want to store / retrieve an object to / from local storage.

Here's a quick test that came back positive

// the api endpoint

var url = "www.api-host.com/api/bla/blub";

// create json call returning promise object

var promise = $.getJSON(url);

// persist promise object in local storage using dash.js

var key = url;

stash.set(key, promise);

// retrieve promise object from local storage

var stashGet = stash.get(key);

// display in console

console.log(stashGet);

Regards, Matthias

0


source






More articles:


All Articles