AJAX/FLASK/JS: How to POST existing array into endpoint

To POST an existing array into an endpoint using Flask, AJAX, and JavaScript (JS), you can follow the steps below:

Step 1: Create an HTML file with a form and a button that triggers the AJAX request. Step 2: In the JavaScript section of the HTML file, write a function that handles the AJAX request. Step 3: Inside the function, create an empty array variable to store the data. Step 4: Use JavaScript to iterate through the existing array, and push each element into the empty array. Step 5: Convert the array into a JSON string using the JSON.stringify() method. Step 6: Make an AJAX POST request to the Flask endpoint URL, passing the JSON string as the data payload. Step 7: In the Flask app, create a route that listens for the POST request from the AJAX request. Step 8: Inside the route function, access the JSON data using request.get_json(). Step 9: Process the data as needed in the Flask app.

Here is an example of how you can implement these steps in your code:

<!DOCTYPE html>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <form id="myForm">
    <button type="button" onclick="postData()">Submit</button>

    function postData() {
      var existingArray = [1, 2, 3, 4, 5];
      var newArray = [];

      for (var i = 0; i < existingArray.length; i++) {

      var jsonData = JSON.stringify(newArray);

        url: '/endpoint',
        type: 'POST',
        contentType: 'application/json',
        data: jsonData,
        success: function(response) {

In your Flask app, you can define the endpoint route and process the data as follows:

from flask import Flask, request

app = Flask(__name__)

@app.route('/endpoint', methods=['POST'])
def endpoint():
    data = request.get_json()
    # Process the data as needed
    return 'Data received'

if __name__ == '__main__':

These steps should allow you to successfully POST an existing array into an endpoint using Flask, AJAX, and JS.