1

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?

find_all
  • 197
  • 3
  • 15

2 Answers2

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()
Akash senta
  • 483
  • 7
  • 16
  • This gave me an empty list `[]` instead of `None` – find_all Jan 31 '20 at 03:32
  • you can refer below link https://stackoverflow.com/a/23889195/1079086 – Akash senta Jan 31 '20 at 03:34
  • 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? – find_all Jan 31 '20 at 03:37
  • Are you trying `request.args.getlist("post[]")` ? – Akash senta Jan 31 '20 at 03:50
  • 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` – find_all Jan 31 '20 at 03:54
  • yes, it will be `$.ajax({ Parameters });` kindly refer this link for more details https://stackoverflow.com/a/34807017/1079086 – Akash senta Jan 31 '20 at 03:58
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"
mechanical_meat
  • 163,903
  • 24
  • 228
  • 223
  • 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? – find_all Jan 31 '20 at 05:12
  • 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. – mechanical_meat Jan 31 '20 at 05:56
  • 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. – find_all Jan 31 '20 at 19:29
  • 1
    @find_all: I changed it to use plain Javascript. Let me know how it goes. – mechanical_meat Jan 31 '20 at 19:46
  • 1
    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. – find_all Jan 31 '20 at 20:06