Question

What’s the quickest and easiest way to convert my json, containing the data of the objects, into actual objects with methods attached?

By way of example, I get data for a fruitbowl with an array of fruit objects which in turn contain an array of seeds thus:

{"fruitbowl": [{
     "name": "apple", 
     "color": "red", 
     "seeds": []
   },{
     "name": "orange", 
     "color": "orange", 
     "seeds": [
        {"size":"small","density":"hard"},
        {"size":"small","density":"soft"}
    ]}
}

That’s all nice and good but down on the client we do stuff with this fruit, like eat it and plant trees…

 var fruitbowl = []
 function Fruit(name, color, seeds){
     this.name = name
     this.color = color
     this.seeds = seeds
     this.eat = function(){
         // munch munch
     }
 }
 function Seed(size, density){
     this.size = size
     this.density = density
     this.plant = function(){
          // grow grow
     }
 }

My ajax’s success routine currently is currently looping over the thing and constructing each object in turn and it doesn’t handle the seeds yet, because before I go looping over seed constructors I’m thinking

Is there not a better way?

    success: function(data){           
        fruitbowl.length = 0
        $.each(data.fruitbowl, function(i, f){
            fruitbowl.push(new Fruit(f.name, f.color, f.seeds))
        })

I haven’t explored looping over the objects as they are and attaching all the methods. Would that work?

Answer 1

Pass the data to the object constructor then use jquery’s “extend” to combine the data and methods:

 function Fruit(data){
     $.extend(this, data)
     this.eat = function(){
         // munch munch
     }
 }
 ...
       $.each(data.fruitbowl, function(i, f){
           fruitbowl.push(new Fruit(f))
       })

You still have loops involved; and must manually code loops for the nested objects (like seeds), but still a very simple way to get past the problem.