how to correctly pass a json object to flask server using jquery ajax

Question

i want to pass a json object which contains nested objects from my client to my server.

on the client side, my data structure looks like this:

var response = {};
response['screening'] = '1';
response['assistance'] = 'wheelchair access';
response['guests'] = {};
response['guests']['1'] = {}
response['guests']['1']['first'] = 'John'
response['guests']['1']['last'] = 'Smith'
response['guests']['2'] = {}
response['guests']['2']['first'] = 'Dave'
response['guests']['2']['last'] = 'Smith'

and my ajax call looks like this:

$.ajax({
  type: "POST",
  url: window.location.pathname,
  data: response
 }).done(function( msg ) {
   alert( "Data Saved: " + msg );
 });

after posting this data to my server, which is run using python flask, i use the request.form object to inspect what was posted from the client. i'd like the data to be structured the same way, however, this is the output on the server:

ImmutableMultiDict([('guests[1][first]', u'John'), ('screening', u'2'), ('guests[2][last]', u'Smith'), ('guests[2][first]', u'Dave'), ('assistance', u'wheelchair access'), ('guests[1][last]', u'Smith')])

as you can see, the response['guests'] object got flattened, and all of its children, such as:

'guests[2][first]'

... are just a strings, not elements of their parent response['guests'].

is there a better way to send this block of data from my client to my server, and maintain its structure properly?

thanks!

Blender · Accepted Answer · 2013-04-04 03:10:29Z

13

You could send your object as a JSON string:

var data = {
    screening: '1',
    assistance: 'wheelchair access',
    guests: [
        {
            first: 'John',
            last: 'Smith'
        },
        {
            first: 'Dave',
            last: 'Smith'
        }
    ]
};

$.ajax({
    type: 'POST',
    url: window.location.href,
    data: JSON.stringify(response),
    dataType: 'json',
    contentType: 'application/json; charset=utf-8'
}).done(function(msg) {
    alert("Data Saved: " + msg);
});

And then use request.json to access it.

answered Apr 4, 2013 at 3:10

Blender

300k55 gold badges462 silver badges511 bronze badges

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

2 Comments

SeanPlusPlus Over a year ago

Totally Works! Thanks. One thing tho, the .done() method never executes, even though i can see the data on my server, and when i check the chrome dev network tab, there is a POST 200 OK for this request.

SeanPlusPlus Over a year ago

Never mind the above comment. I need to jsonify my response from the server. Thanks again for the help with this.

Paco · Accepted Answer · 2013-04-04 15:28:40Z

1

On the client side, you need to convert that javascript object to a json string. To do so, you can use this:

JSON.stringify(my_object) // This will return a string that you can pass in you ajax request

Then on the server side, you need to convert that object to a python dictionnary using the json module:

import simplejson
my_new_object = simplejson.loads(my_json) // my_json is my_object from the client (previously called my_object)

my_new_object is now a python dictionnary, and you can do whatever you want with it

answered Apr 4, 2013 at 15:28

Paco

4,7283 gold badges31 silver badges54 bronze badges

Collectives™ on Stack Overflow

how to correctly pass a json object to flask server using jquery ajax

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related