Django POST stores everything in key instead of key-value pair

Question

I am trying to post several form data in one go (Yes, they need to go in as one post content. No this can not be changed. Don't even suggest having multiple submits.) and I can build correct type of object.

convert_to_object is a custom function that converts serialized array into an object with correct key-value pairs

save_button.click(function(){
      //Collect information
      console.log("Collecting form data");
      var data = {};
      data.form1= convert_to_object($("[data-formtype='form1']").serializeArray());
      data.form2= convert_to_object($("[data-formtype='form2']").serializeArray());
      data.form3= convert_to_object($("[data-formtype='form3']").serializeArray());

      var items= []; 
      forms_list.forEach(form_in_list=> {
        items.push(convert_to_object(form_in_list.serializeArray()));
      });

      data.list_of_items = items;


      //Send our data object to our endpoint
      $.post("add", data)
      .done(function(data, status){
          //Success handling
      })
      .fail(function(data, status){
          //Failure handling
      })

    });

This creates correct JavaScript object that has all the values in correct shape and I can convert this to JSON string.

Issue is that when I send this JSON string to Django I don't get key-value pairs in request.POST, instead I get the entire json string as key and value as empty string. So instead of

<QueryDict: {
    "form1":{"field1":"","field2":"","field3":""},
    "form2":{"field1":"","field2":"","field3":"","field4":""},
    "form3":{"field1":"","field2":"","field3":"","field4":""},
    "list_of_items":[ {"item1":"", "item2":""}] 
}>

I get

<QueryDict: 
'{"form1[field1]":[""],"form1[field2]":[""],"form1[field3]":[""],"form2[field1]":[""],"form2[field2]":[""],"form2[field3]":[""],"form2[field4]":[""]},"form2[field1]":["]","form2[field2]":[""],"form2[field3]":[""],"form2[field4]":[""]},"list_of_items[0][item1]":"","list_of_items[0][item2]":""}' : ''
}>

As you can see, in the second one the entire set is made into key, instead of series of key-value pairs.

How do I ensure that my object gets correctly mapped out to the POST queryset?

EDIT

JSON string that is send(with formatting for easier reading):

{
"form1":{"field1":"","field2":"","field3":""},
"form2":{"field1":"","field2":"","field3":"","field4":""},
"form3":{"field1":"","field2":"","field3":"","field4":""},
"list_of_items":[{"item1":"", "item2":""]
}

EDIT 2

Screenshot of XHR (Firefox). Please ignore 501 response, that is intented response (for now)

Looking at your second output, its as if your frontend sent a huge string rather than an object, hence why Django is making it into a key. Could you share your JSON/request parameters as shown in your browser console? (ie before they reach Django) — Jordan Kowal, Feb 25 '20 at 12:41
@JordanKowal I have added the JSON string that is generate to the post. Hopefully it is useful. It is how it appears in console when I use console.log() — Mandemon, Feb 25 '20 at 12:57
Are you sure you're sending that as JSON instead of a regular POST? — AKX, Feb 25 '20 at 13:04
@AKX Yes. I have tried $.post("add", JSON.stringify(data), "application/json") too and it does exact same thing. — Mandemon, Feb 25 '20 at 13:05
Could you share a screenshot of the XHR request, in the params tab? — Jordan Kowal, Feb 25 '20 at 13:06
I believe we have found your issue. See that `console.log` in your screenshot? Well, your `Form data` should look like that. Like an actual object. It seems your `Form Data` right now is a huge string. Your JS is not posting the data correctly. — Jordan Kowal, Feb 25 '20 at 13:24
The issue is with your POST request. Your object seems fine (as shown in your console), but when POSTING it, it becomes a huge string. Try comparing your code with the simple snippets to see if you spot anything: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_post2 (if you open the console and check the XHR request, you'll see that the form data does look like a object, and not a huge string) — Jordan Kowal, Feb 25 '20 at 13:33

score 0 · Answer 1 · answered Feb 25 '20 at 13:00

0

Check out this post. This is someone having the same issue as you, and managed to fix it : Django's Querydict bizarre behavior: bunches POST dictionary into a single key

Let me know if it works

answered Feb 25 '20 at 13:00

Jordan Kowal

1,444
8
18

That one relates to python request calls, I am trying to send message via jQuery, And no, changing content type does nothing. – Mandemon Feb 25 '20 at 13:05

score 0 · Accepted Answer · answered Feb 25 '20 at 13:58

Thanks to @Jordan Kowal I was able to solve the issue. Issue was that data was being send as a string, instead of an object. After making sure that the variable remains as an object, I was able to correctly load the data.

Altough I also found that you can deliver entire thing as JSON string and then load it from request.body, which gives you a dict you can easily process.

Django POST stores everything in key instead of key-value pair

2 Answers2