How to display json data in a html modal

Question

I need to show json data which is in an array in a html modal. Currently the json data array is correctly shown in the console.

javascript

$('.detailButton').on('click', function(){
 var BASE_URL = "http://localhost/employeemgt/index.php/";
 var leave_id = $(this).val();
 var i;
  $.ajax({
    type: 'POST',
    dataType: "JSON",
    data:{leave_id:leave_id},
    url: BASE_URL + 'admin/AdminDashboardController/viewRequest',   

    success:function(data){                 
    console.log(data);
    $('#leave_details').html(data);       
    $('#pendingLeaveRequest').modal('show');
  },
 error:function(error){
    alert(error);
 }});
});

modal

<!-- Modal -->
    <div class="modal fade" id="pendingLeaveRequest" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-body" id="leave_details" >
            <p> </p>
          </div>
    </div>

console

[{…}] 0 : id : "124" leave_end : "2018-08-20" leave_start : "2018-08-18" leave_type : "Annual" status : "0" user_id : "6" user_name : "Harry Potter" proto : Object length : 1 proto : Array(0)

95faf8e76605e973 · Accepted Answer · 2018-08-18 12:31:19Z

1

You want to traverse the data to display it.
Looking at your console, you can do something like this:

$('#leave_details').html("<p>" + data[0].id + "</p>");

This is just a sample, the design will be up to you.

answered Aug 18, 2018 at 12:31

95faf8e76605e973

14.3k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display json data in a html modal

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related