"Hydrate" a Javascript Object Instance with json array just like PHP does

Question

Here is the "problem", I fill PHP objects with data like this :

public function hydrate(array $data){
    foreach($data as $key=>$value){
        $method = 'set'.ucfirst($key);
        if(METHOD_EXISTS($this,$method)){
            $this->$method($value);
        }
    }
}

Now, i'd like to turn it to javascript object instead of PHP, so, i get the "data array" from my db with an .ajax call, and I get a JSON object that"looks" like this :

{"id":"44","name":"test","testKey":"qklfjmdjfq88"}

My Javascript "object" looks like this :

function myObject(){
    var element,id,name,testKey;

    this.hydrate = function(ajaxData){
        //THIS CODE DOES NOT WORK
        //THAT IS THE PROBLEM
        Object.keys(ajaxData).forEach(function(key){
            console.log("function loop key : "+key);//OK
            console.log("function loop value : "+ajaxData[key]);//OK
            this.key = Element[key];
        });
    };
}

so, once I receive my JSON "array" in my js script, i'd like to turn it to a js object instance, so I'm doing this :

var myCurrentObject = new myObject();
myCurrentObject.hydrate(/*WHAT MY AJAX CALL RETURN*/);
console.log(myCurrentObject.name);
//console shows undefined...

So problem seems to be in the .hydrate function... this.key does not correspond to the myObject instance var... (name / id / testKey) How to fill the js object instance with a function that looks like the one I use when working with php?

Thanks for help/reading

Answer 1

In this function

this.hydrate = function(ajaxData){
    Object.keys(ajaxData).forEach(function(key){
        console.log("function loop key : "+key);
        console.log("function loop value : "+ajaxData[key]);
        this.key = Element[key];
    });
};

this.key is not referring to myObject, you should try:

this.hydrate = function(ajaxData){
    Object.keys(ajaxData).forEach(
      // Execute a function passing param this as obj that return a function 
      // (closure)
      (function(obj){
        return function(key){
            obj[key] = ajaxData[key];
        };
      })(this)
    );
};

or save it in a variable

this.hydrate = function(ajaxData){
    var that = this;
    Object.keys(ajaxData).forEach(function(key){
        that[key] = ajaxData[key];
    });
};

or simplier use a for loop

this.hydrate = function(ajaxData){
    var k =  Object.keys(ajaxData);
    for(var i=0, len = k.length; i<len; i++){
        this[k[i]] = ajaxData[k[i]];
    }
};