Make json from array of objects javascript

Question

I have a javascript object with a lot of attributes and methods, I want it to be sent to a php file. For this, I want to transform it to Json data.

But I just can`t understand how should I use json.stringify to do this, because of the complex object's class.

The objects looks like this. I have an array of objects that I have to sent over ajax.

Also, this class has array of other objects as attributes, and a bunch of other methods.

var PhotoFile = function(clientFileHandle){
     PhotoFile.count = PhotoFile.count  + 1;
        this.specificClass = "no-" + PhotoFile.count;
        this.checkbox = null;
        this.attributes = [];
        this.file = clientFileHandle;
        this.fileExtension = null;
        //meta data
        this.meta = null;
        this.orientation = null;
        this.oDateTime = null;
        this.maxWidth = 150;
        this.maxHeight = 100;
        //raw data
        this.imgData = null;
        this.imgDataWidth = null;
        this.imgDataHeight = null;
        this.checkSum1 = null;
        this.checkSum2 = null;
        //DOM stuff
        this.domElement = null;
        this.imgElement = null;
        this.loadProgressBar = null;
        this.uploadProgressBar = null;
        this.imageContainer = null;
        this.attributeContainer = null;
        this.indexInGlobalArray = -1;
        //flags
        this.metaLoaded = false;
        this.startedLoading = false;
        this.finishedLoading = false;
        this.needsUploading = true;

        this.imageDisplayed = false;
        //listeners
        this.onFinishedLoading = function () {};
        this.onFinishedUploading = function () {console.log('Called default end '+this.file.name)};
    ..... plus other methods.
    }

So, what happens when you do var obj = new PhotoFile('...'); and then JSON.stringify(obj);? What do you get? — gen_Eric
– gen_Eric, Commented Oct 30, 2014 at 20:42
Well, you will not be able to serialize DOM nodes and functions if that's what you expect. Which data are you trying to send? Your object seems to be doing WAY TOO MUCH btw... Single Responsibility Principle — plalx
– plalx, Commented Oct 30, 2014 at 20:44
I get erros like: "Uncaught InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement'". @plalx, I know, but I have to work with that class. Would you suggest to make a method on that class, that returns an array of all attributes I need to send over Json? Or make another class to represent the data send over Json? — user2997779
– user2997779, Commented Oct 30, 2014 at 20:51
Making a method that returns an array (or object) of all the values you want (as long as they are not functions or DOM elements) seems like a fine solution. — gen_Eric
– gen_Eric, Commented Oct 30, 2014 at 20:54

plalx · Accepted Answer · 2014-10-30 21:18:28Z

You could create a function on your object that returns a serializable representation of your object.

E.g.

function SomeObject() {
    this.serializeThis = 'serializeThis';
    this.dontSerializeThis = 'dontSerializeThis';
}

SomeObject.prototype.toSerializable = function () {
    //You can use a generic solution like below
    return subsetOf(this, ['serializeThis']);

    //Or a hard-coded version
    // return { serializeThis: this.serializeThis };
};

//The generic property extraction algorithm would need to be more complex
//to deep-filter objects.
function subsetOf(obj, props) {
    return (props || []).reduce(function (subset, prop) {
        subset[prop] = obj[prop];
        return subset;
    }, {});
}


var o = new SomeObject();

JSON.stringify(o.toSerializable()); //{"serializeThis":"serializeThis"}

Note that using a generic property extractor algorithm would force you to leak implementation details and therefore, violate encapsulation so although it might be shorter to implement a solution using this method, it might not be the best way in some cases.

However, one thing that can usually be done to limit internals leakage is to implement property getters.

Collectives™ on Stack Overflow

Make json from array of objects javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related