Creating custom JavaScript object from data returned by jQuery AJAX request

Question

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.

Why do you want an object to be created? Also, reading this 3-part series has helped me think differently in JavaScript - enterprisejquery.com/2010/10/… — Hari Pachuveetil
– 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
– Roberto Linares, Commented Feb 14, 2012 at 5:24

driangle · Accepted Answer · 2012-02-14 04:32:18Z

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;
});

maxedison · Accepted Answer · 2012-02-14 04:22:20Z

0

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).

answered Feb 14, 2012 at 4:22

maxedison

17.6k15 gold badges72 silver badges118 bronze badges

Collectives™ on Stack Overflow

Creating custom JavaScript object from data returned by jQuery AJAX request

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related