Passing ajax response data to modal

Question

I've got a form that submits to backend process(Flask app) via Ajax and then returns response in an array. How to open a modal and pass the data in the response to it?

<script>
$(document).ready(function() {
    $("#myButton").click(function(event) {
        $.ajax({
            url: '/get_data',
            type: 'POST',
            data: myFormData,
            success: function(AjaxResponse){
                console.log(AjaxResponse);
                $('#myModal').modal('show'); //open modal and pass AjaxResponse to it
            }
        });
    });
});
</script>

Backend process

@app.route('/get_data',methods=['POST'])
def get_data():
    if request.method == 'POST':
        '''
        use myFormData to request data from database
        returns result in array 
        response = ["Red", "Green", "Blue", "Black"]
        '''
        return jsonify(response)

And the modal:

<div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {% for item in AjaxResponse %}
          <label>{{item}}</label>
        {% endfor %}                          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

If getting back json result is an option, then you can do this:

// add datatype to your ajax call
$.ajax({
    url: '/get_data',
    dataType: 'json',
    type: 'POST',
    data: myFormData,
    success: function(data){
        var items = '';
        $.each(data, function (i, item) {
            // build your html here and append it to your .modal-body
            var label = "<label>" + item.MyProperty+ "</label>"
            $('div.modal-body').append(label);
        });

    }
});

not sure which server side code you are using... if using ASP.NET MVC, you can build your HTML on the server side and return it in a partial view. Your ajax call needs to get the partial view and replace it: See here for explanation

Answer 2

Try This

$.ajax({
    url: '/get_data',
    dataType: 'json',
    type: 'POST',
    data: myFormData,
    success: function(data){
        var items = '';
        var label = '';
        $.each(data, function (i, item) {
            // build your html here and append it to your .modal-body
            label = "<label>" + item.MyProperty+ "</label>"
        });
 $('div.modal-body').append(label);

    }
});