4

I have a few arrays generated by the front-end in JQuery.

Edit1(based on the answer by Edgar Henriquez):

my_jq.js:

var a = ['one','two'];
var b = ['three','four'];
var c = ['five'];
var d = ['six','seven','eight']; 
var e = ['nine','ten','eleven'];
var newArray = [];

//jsonify to send to the server
$.ajax('/output', { 
    type: "POST",
    contentType: "application/json",
    dataType: "json",
    data: JSON.stringify(postData),
    success: function(data, status){
        console.log(newArray); 
        console.log(status);} 
 });

I am passing the selected values to the server (Flask/python) and have it compute a Cartesian product. I then need to show the output in the output.html screen

@app.route('/output', methods = ['GET','POST'])
def output():
    data1 = request.get_json(force = True)
    a = data1['a']
    b = data1['b']
    c = data1['c']
    d = data1['d']
    e = data1['e']
    newArray = [a,b,c,d,e]
for element in itertools.product(*newArray):
    print(element)
    return jsonify(element)
return render_template('output.html', element = element)

output.html:

<p>{{ element }}</p>

Edit2:

With this code, the /output.html generates:

 "Bad Request
 Failed to decode JSON object: Expecting value: line 1 column 1 (char 0)"

The Inspect shows: 

 "Failed to load resource: the server responded with a status of 500 (INTERNAL SERVER ERROR)"

Why is it not recognizing it?

Feyzi Bagirov
  • 1,292
  • 4
  • 28
  • 46

1 Answers1

9

For your jquery code you can have a JavaScript object (naming the properties of the object as the array variables just for convention). Something like this:

var a = ['one','two'];
var b = ['three','four'];
var c = ['five'];
var d = ['six','seven','eight']; 
var e = ['nine','ten','eleven'];

var postData = {
  a: a,
  b: b,
  c: c,
  d: d,
  e: e
}

$.ajax({
    url: "/output",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify(postData),
    success: function(data){/* do something */}
});

back in your server you could do something like:

@app.route('/output', methods=['POST'])
def output():
    result = []
    data = request.get_json()
    a = data['a'] #will give you array a
    b = data['b'] #will give you array b
    c = data['c'] #will give you array c
    d = data['d'] #will give you array d
    e = data['e'] #will give you array e
    newArray = [a, b, c, d, e]
    #To test you got the data do a print statement

    print(newArray)

    # The for loop is not necessary if you pass the newArray directly to 
    # your template "output.html".
    #
    #for element in newArray:
    #    result.append(element)
    #
    #like this
    return render_template('output.html', element=newArray)

You can display result in your output.html however you decide is best for you, just remember

Hope it helps!

Edgar Henriquez
  • 1,373
  • 1
  • 14
  • 17