CODEWITHSUNDEEP
htmljsonajaxcodeigniterbootstrap-modal
shavindip
shavindip

Reputation: 622

How to display json data in a html modal

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)

Upvotes: 0

Views: 2405

Answers (1)

95faf8e76605e973
95faf8e76605e973

Reputation: 14201

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.

Upvotes: 1

Related Questions