0

How should one submit a traditional JavaScript object along with a jQuery object in the same ajax request?

<form id="fooZ">
    <input type="text" name="z0" value="za">
    <input type="text" name="z1" value="zb">
    <input type="text" name="z2" value="zc">
</form>

var data={  //Created as applicable using JavaScript
    "x":[
        {"x0":"xa0","x1":"xb0","x2":"xc0"},
        {"x0":"xa1","x1":"xb1","x2":"xc1"},
        {"x0":"xa2","x1":"xb2","x2":"xc2"}
    ],
    "y":[
        {"y0":"ya0","y0":"yb0","y0":"yc0"},
        {"y1":"ya1","y1":"yb1","y1":"yc1"},
        {"y2":"ya2","y2":"yb2","y2":"yc2"}
    ]
};

data.z=$('#fooZ').find(':input'); //Doesn't work
data.z=$('#fooZ').find(':input').serializeArray(); //Doesn't work

$.ajax({
    type: "PUT",
    url: url,
    success: function(response){/* ... */},
    error: function(jqXHR, status, err) {/* ... */},
    dataType: 'json',
    data:data
});

Desire for the server to receive:

{
    "x":[
        {"a":"xa0","b":"xb0","c":"xc0"},
        {"a":"xa1","b":"xb1","c":"xc1"},
        {"a":"xa2","b":"xb2","c":"xc2"}
    ],
    "y":[
        {"a":"ya0","b":"yb0","c":"yc0"},
        {"a":"ya1","b":"yb1","c":"yc1"},
        {"a":"ya2","b":"yb2","c":"yc2"}
    ],
    "z":{"z0":"za","z1":"zb","z2":"zc"}
}
user1032531
  • 24,767
  • 68
  • 217
  • 387
  • What do you want the server to receive? – samuellawrentz Jul 28 '18 at 11:56
  • What is the expected output? – Sujit Agarwal Jul 28 '18 at 11:57
  • 2
    What do you mean "a jQuery object"? JavaScript is JavaScript, an object is an object. What data is being sent to the server? What data are you expecting to be sent? Are you just asking how to serialize a form in jQuery? (https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery ?) – David Jul 28 '18 at 11:57
  • @samuellawrentz. See bottom of original post. – user1032531 Jul 28 '18 at 11:59
  • @SujitAgarwal The server receiving the object shown at the bottom of the original post. – user1032531 Jul 28 '18 at 12:00
  • If that is the case, then the serialize function does create the key value pair for all 3 input boxes, correctly, I see. – Sujit Agarwal Jul 28 '18 at 12:02
  • @David Yes, I agree a jQuery is a JavaScript object. To be submitted via Ajax, jQuery behind the scenes will serialize a literal object, or I can use the `serializeArray()` method to serialize a jQuery collection, but I can't figure out how to do both. – user1032531 Jul 28 '18 at 12:02
  • @SujitAgarwal Yes it does, but how can one submit both the serialize function's output along with another object? – user1032531 Jul 28 '18 at 12:03
  • 2
    @user1032531: It's not clear what you're really asking. Perhaps there's a language barrier here? In your question it sounds like you're claiming the server is receiving the JavaScript object you show, which looks like what you'd *want* the server to receive. So what specifically is the problem? In your comment you say that you can create the objects you want, so what's the problem? Please elaborate. – David Jul 28 '18 at 12:03
  • @David My bad. What I showed is the "desired" data received by the server. – user1032531 Jul 28 '18 at 12:08
  • 1
    @user1032531: And what is the actual result you’re getting? It sounds like you may just be asking how to serialize a form to an object. If so then this would be a duplicate of the question I linked above. – David Jul 28 '18 at 12:12
  • @David Using `data.z=$('#fooZ').find(':input');` chokes the browser. Using `data.z=$('#fooZ').find(':input').serializeArray();` doesn't work as it will be serialized twice. Yes, your referenced post will work, but it really doesn't meet the op's question as he/she specifically said `without having to loop over each element`. I am fine doing so, but thought there would be a more concise way of doing so. – user1032531 Jul 28 '18 at 12:15
  • @user1032531 you will always need to use a loop, the loop is either hidden within a library like jQuery or you do it your self. But there is not way around using a loop. So there wouldn't be any answer that would meet that requirement. – t.niese Jul 28 '18 at 12:27
  • @t.niese I understand you point. While still a loop, if thought there might be a native jQuery method available. Or maybe using FormData where the loop is implemented via some lower language. – user1032531 Jul 28 '18 at 12:35

0 Answers0