title: Passing JSON data to the Flask server using AJAX?
body: <p>I have a few arrays generated by the front-end in JQuery.</p>
  
  <p><strong>Edit1(based on the answer by Edgar Henriquez)</strong>:</p>
  
  <p>my_jq.js:</p>
  
  <pre><code>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);} 
   });
  </code></pre>
  
  <p>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</p>
  
  <pre><code>@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)
  </code></pre>
  
  <p>output.html:</p>
  
  <pre><code>&lt;p&gt;{{ element }}&lt;/p&gt;
  </code></pre>
  
  <p><strong>Edit2:</strong> </p>
  
  <p>With this code, the /output.html generates:</p>
  
  <pre><code> "Bad Request
   Failed to decode JSON object: Expecting value: line 1 column 1 (char 0)"
  </code></pre>
  
  <p>The Inspect shows: </p>
  
  <pre><code> "Failed to load resource: the server responded with a status of 500 (INTERNAL SERVER ERROR)"
  </code></pre>
  
  <p>Why is it not recognizing it? </p>