Pass Javascript array with Jquery and JSON from client-side to server side in Flask

Question

I am attempting to pass a Javascript Array from the client side to the server side (Flask). My code seems to work for both integers and strings. When I try to send an array with the exact same code, I get None.

Server side code:

@app.route("/route1", methods=['GET', 'POST'])
def route1():

    a = request.args.get('post')
    result = json.dumps(a)
    print(a)
    print(result)

Client side:

$SCRIPT_ROOT = {{ request.script_root | tojson | safe }};

var x = ["test", "test2"];

function newFunction() {

    console.log(x)
    $.getJSON($SCRIPT_ROOT + '/route1', { post: x },
        function (data) {
            var response = data.result;
            console.log(response);
        }

    )
};

As I said before, this seems to work perfectly when x is simply assigned a string or an integer. When trying to pass through this array, I get None and NULL for my two print statements, respectively. How can I properly pass through the array to the server side?

mechanical_meat · Accepted Answer · 2020-01-31 20:55:09Z

1

Yeah, I wasn't able to get this to work using $.getJSON either...

Here's a tested $.ajax solution:

    <script>
    $SCRIPT_ROOT = {{ request.script_root | tojson | safe }};
    var x = ["test", "test2"];
        function f1(){
            $.ajax({
                type: "POST",
                url: $SCRIPT_ROOT + "/route1",
                contentType: "application/json",
                dataType: "JSON",
                data: JSON.stringify(x)
            });
        };
    </script>

I trigger this with a button like this:

    <button id="testing" name="testing" onclick="f1();">testing</button>

And the Flask code:

@bp.route("/route1", methods=['GET', 'POST'])
def route1():
    a = request.get_json()
    print(a)
    return "hello, world"

edited Jan 31, 2020 at 20:55

answered Jan 31, 2020 at 4:16

mechanical_meat

170k25 gold badges237 silver badges231 bronze badges

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

5 Comments

find_all Over a year ago

This looks good, but for some reason nothing seems to be happen. I think the function isn't being triggered. Does the button need to be part of a specific form group?

mechanical_meat Over a year ago

I didn't put the button in a form group it's all by itself. I'm going to sleep soon, but I'll check back tomorrow to see if I can help further.

find_all Over a year ago

Could I name the function and trigger the function in the typical way as I've done with my original code? I am not familiar with Jquery unfortunately, but it seems to be more convoluted in terms of executing functions.

mechanical_meat Over a year ago

@find_all: I changed it to use plain Javascript. Let me know how it goes.

find_all Over a year ago

Thanks for your help. Unfortunately now I'm getting ValueError: too many values to unpack (expected 2). If you don't have the time to help me anymore that's fine, I'll just pull in the messy data I got from getlist and regex/tokenize I guess. Seems like my only option at this point unless you have an idea about this error.

Akash senta · Accepted Answer · 2020-01-31 03:29:23Z

1

you can try below code. it will work. as you are passing array as parameter. as request.args is a MultiDict instance

request.args.getlist(Key)

Or you should try to convert your Array to Json and pass json to Server. You can use below method to convert json

JSON.stringify()

Server side you can use

data = request.get_json()

answered Jan 31, 2020 at 3:29

Akash senta

4937 silver badges17 bronze badges

6 Comments

find_all Over a year ago

This gave me an empty list [] instead of None

Akash senta Over a year ago

you can refer below link stackoverflow.com/a/23889195/1079086

find_all Over a year ago

I was able to get it working so I will upvote you. Unfortunately it still passes over very strangely, I get ['["test","test3"]']. Do you know why it is in an embedded list like that?

Akash senta Over a year ago

Are you trying request.args.getlist("post[]") ?

find_all Over a year ago

Yes I tried that, and I get an empty list. Apparently I need to use AJAX though, and trying to figure out how to apply that to my current code. Would it be $.ajax.getJSON

|

Collectives™ on Stack Overflow

Pass Javascript array with Jquery and JSON from client-side to server side in Flask

2 Answers 2

5 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related