I want to create a custom javascript object which contains data returned from a jQuery AJAX request, but I don't know which is the right way to do it. I was thinking maybe one way could be to include the AJAX request inside the constructor function so the object is created like this:

// Constructor function
function CustomObject(dataUrl) {
    var that = this;

    $.ajax(dataUrl, {
        success: function (json) {
            that.data = $.parseJSON(json);
        }
    });
}

// Creating new custom object
var myObject = new CustomObject('http://.....');

Another way may be to use a function which does the AJAX and then returns the new object based on the data from the AJAX response.

function customObject(dataUrl) {
    // Constructor function
    function CustomObject(data) {
        this.data = data;
    }

    $.ajax(dataUrl, {
        success: function (json) {
            var data = $.parseJSON(json);
            return new CustomObject(data);
        }
    });
}

// Creating new custom object
var myObject = customObject('http://.....')

I would like to know what is the best practice when doing something like this, as well as advantages/disadvatages of different methods. Maybe you can point me to some article or example on something similiar to what I am trying to do.

Thanks in advance.

I want to create a custom javascript object which contains data returned from a jQuery AJAX request, but I don't know which is the right way to do it. I was thinking maybe one way could be to include the AJAX request inside the constructor function so the object is created like this:

// Constructor function
function CustomObject(dataUrl) {
    var that = this;

    $.ajax(dataUrl, {
        success: function (json) {
            that.data = $.parseJSON(json);
        }
    });
}

// Creating new custom object
var myObject = new CustomObject('http://.....');

Another way may be to use a function which does the AJAX and then returns the new object based on the data from the AJAX response.

function customObject(dataUrl) {
    // Constructor function
    function CustomObject(data) {
        this.data = data;
    }

    $.ajax(dataUrl, {
        success: function (json) {
            var data = $.parseJSON(json);
            return new CustomObject(data);
        }
    });
}

// Creating new custom object
var myObject = customObject('http://.....')

I would like to know what is the best practice when doing something like this, as well as advantages/disadvatages of different methods. Maybe you can point me to some article or example on something similiar to what I am trying to do.

Thanks in advance.

• javascript
• jquery
• ajax

• Why do you want an object to be created? Also, reading this 3-part series has helped me think differently in JavaScript - enterprisejquery./2010/10/… – Hari Pachuveetil Commented Feb 14, 2012 at 4:20
• What about returning a JSON from server-side with the object structure and data you already want? – Roberto Linares Commented Feb 14, 2012 at 5:24
• I am creating an object because it has custom methods – VerizonW Commented Feb 14, 2012 at 16:03

2 Answers 2

I think this would be a better approach, it makes your CustomObject only knowledgeable about the data it contains. Here you delegate the work of creating objects to a factory, and pass in a callback to get a reference to the created object, since ajax is asynchronous. If you don't mind making it synchronous, then the createCustomObject function can just return the instance, and the callback can be removed.

function CustomObject(data) {
    this.data = data;
}

var factory = (function(){
   function create(dataUrl, objectClass, callback){
       $.ajax({
           url: dataUrl,
           success: function (data) {
              callback(new objectClass(data));
            }
           });
   }
   return{
      createCustomObject: function(dataUrl, callback){
          create(dataUrl, CustomObject, callback);
      }
   };
})();

// Creating new custom object
var myObject = null;
factory.createCustomObject('http://..', function(customObject){
   myObject = customObject;
});

I'd argue that the second method is better because then you only create a new CustomObject once the script is actually fully prepared to do so (i.e. it has the data it needs from the AJAX request).