How do I POST an array of objects with ajax jQuery or Zepto

Question

I d like to POST an array of objects with   ajax in Zepto or Jquery  Both exhibit the same odd error  but I can t find what I m doing wrong   The data saves to the server when sent using a test client like  RestEasy   and I can see the request getting mangled in the browser s net panel  so I believe JS is the culprit   If I send an array of objects as the data property of a POST  they are not properly sent   Data object   var postData            id   1    name   bob          id   2    name   jonas         Request     ajax     url   saveDeviceUrl   type   POST    contentType   application json    dataType   json    data  postData   success   madeSave bind this      processData  false   Doesn t help       Request body as seen in the browser    bob undefined amp jonas undefined    This can be seen more directly by using the   param method that both jQuery and Zepto use to prepare POST data     param             id   1    name   bob          id   2    name   jonas            Output   bob undefined amp jonas undefined    So it seems like the preparation that these libraries do for complex post data is different than I expect   I see this answer  but I don t want to send the data as a query param as I m POSTing lots of content  How do I send an array in an  ajax post using jQuery   What is the correct way to send multiple objects over POST using jQuery Zepto   Using   ajax      data  JSON stringify postData        sends non-mangled content  but the server doesn t like the format   Update  Seems like JSON stringify sends correctly formatted content  The issue is that the server side is very  very specific about the structure of the object that it wants  If I add or remove any properties from the object  it will fail the whole process rather than using the properties that do match  This is inconvenient because it s nice to use server-sent content as a view model  but view models get changed     Still working on the best solution

User · Answer

Check this example of post the array of different types

function PostArray() {
    var myObj = [
        { 'fstName': 'name 1', 'lastName': 'last name 1', 'age': 32 }
      , { 'fstName': 'name 2', 'lastName': 'last name 1', 'age': 33 }
    ];

    var postData = JSON.stringify({ lst: myObj });
    console.log(postData);

    $.ajax({
        type: "POST",
        url: urlWebMethods + "/getNames",
        data: postData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            alert(response.d);
        },
        failure: function (msg) {
            alert(msg.d);
        }
    });
}

If using a WebMethod in C# you can retrieve the data like this

[WebMethod]
    public static string getNames(IEnumerable<object> lst)
    {
        string names = "";
        try
        {
            foreach (object item in lst)
            {
                Type myType = item.GetType();
                IList<PropertyInfo> props = new List<PropertyInfo>(myType.GetProperties());

                foreach (PropertyInfo prop in props)
                {
                    if(prop.Name == "Values")
                    {
                        Dictionary<string, object> dic = item as Dictionary<string, object>;
                        names += dic["fstName"];
                    }
                }
            }
        }
        catch (Exception ex)
        {
             names = "-1";
        }
        return names;
    }

Example in POST an array of objects with $.ajax to C# WebMethod

User · Answer

Try the following     ajax     url   saveDeviceUrl   type   POST    contentType   application json    dataType   json    data    myArray   postData    success   madeSave bind this      processData  false   Doesn t help

User · Answer

Be sure to stringify before sending  I leaned on the libraries too much and thought they would encode properly based on the contentType I was posting  but they do not seem to   Works     ajax       url   saveAllDevicesUrl     type   POST      contentType   application json      data  JSON stringify postData    stringify is important     success   madeSave bind this        I prefer this method to using a plugin like   toJSON  although that does accomplish the same thing

User · Answer

edit  I guess it s now starting to be safe to use the native JSON stringify   method  supported by most browsers  yes  even IE8  if you re wondering    As simple as   JSON stringify yourData      You should encode you data in JSON before sending it  you can t just send an object like this as POST data    I recommand using the jQuery json plugin to do so  You can then use something like this in jQuery     post  saveDeviceUrl        data     toJSON postData     function response         Process your response here

User · Answer

I was having same issue when I was receiving array of objects in django sent by ajax  JSONStringyfy worked for me  You can have a look for this  First I stringify the data as var myData          allData forEach  x  index    gt                console log index            myData push JSON stringify             quot product id quot    x product id            quot product quot    x product            quot url quot    x url            quot image url quot    x image url            quot price quot    x price            quot source quot   x source                  Then I sent it like   ajax           url      url  quot url name quot               method   quot POST quot           data                csrfmiddlewaretoken       csrf token                  queryset     myData                    success   res    gt               success post work here            And received as   list of json   request POST getlist  quot queryset   quot       list of json     json loads item  for item in list of json

[jquery] How do I POST an array of objects with $.ajax (jQuery or Zepto)

Examples related to jquery

Examples related to ajax

Examples related to rest

Examples related to zepto