Assign an object to 'data' property in '$.ajax' method of jquery

Question

This is what I know on the subject:

We have an ajax function to which we can pass an object with properties like this:

    var ajaxRequest = {};

    ajaxRequest['type'] = 'POST';
    ajaxRequest['async'] = false;
    ajaxRequest['datatype'] = 'json';
    ajaxRequest['url'] = '/Query/getMydata';

    $.ajax(ajaxRequest);

one of these properties is the data parameter which is made of key / value pairs:

    ajaxRequest['data'] = {color: 'red' , name: 'Steve' }

I tried to do something like this:

    var oData = [];
    oData['color'] = 'yellow';
    oData['name'] = 'Fred';

    ajaxRequest['data'] = oData;

but it does not work.

So my question is: there is an object that I can assign to the 'data' parameter, or I am forced to build the string with concatenation?

EDIT==============

Maybe I did not explain, I know that the method can be created by code like this:

     var ajaxRequest = {
      type: 'POST',
      async: false
      ....
      };

but I'm using objects and properties because I need to make the method 'generic', then I will add the 'if' like this:

    function ajaxReq(data){
         var ajaxRequest = {};

         if( !data.isEmpty()){
             ajaxRequest['data'] = data;
         }

           ajaxRequest['type'] = 'POST';
           ajaxRequest['async'] = false;
           ajaxRequest['datatype'] = 'json';
           ajaxRequest['url'] = '/Query/getMydata';

           ...

           $.ajax(ajaxRequest);
    }

Don´t make it a string; ajaxRequest['data'] = {color: 'red' , name: 'Steve' }; — Stefan
– Stefan, Commented Feb 1, 2013 at 16:03

lonesomeday · Accepted Answer · 2013-02-01 16:01:30Z

6

Your complex method is entirely unnecessary. You should just be using object literals:

var ajaxRequest = {
    type: 'POST',
    async: false
    datatype: 'json',
    url: '/Query/getMydata'
};

$.ajax(ajaxRequest);

You can also nest them, so you could have this:

var ajaxRequest = {
    type: 'POST',
    async: false
    datatype: 'json',
    url: '/Query/getMydata',
    data: {
        color: 'yellow',
        name: 'Fred'
    }
};

jQuery will convert this into a query string for you, so you don't need to worry about that.

An additional clarification... The reason that oData = [] is causing problems is that [] creates an array. In Javascript, arrays are a special kind of object. Only properties with numeric keys are considered members of the array (e.g. oData[1]). If you'd used an object literal ({}) as you did with ajaxRequest, it would have worked fine.

answered Feb 1, 2013 at 16:01

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

benVG Over a year ago

I've edited the question to make it clear what I wanted to do. And I knew what you wrote in the first part of your answer. I had not noticed that I created an array instead of an object Litteral, and the second part of your answer solved my poblem! Thank you!

lonesomeday Over a year ago

@benVG Fair enough, but it would make sense to construct as many elements as possible within the object literal, i.e. those that are constant. Note also that you can do ajaxRequest.url = '/Query/getMydata', for instance, to save characters and neaten code.

benVG Over a year ago

I did not know this,it will certainly help me!

Collectives™ on Stack Overflow

Assign an object to 'data' property in '$.ajax' method of jquery

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related