how to echo json data in table list view

Question

I have an function which i am calling from ajax.i am getting data in json format from function. i want to display all data in Table listview one by one..my function is working properly and getting data...but i cant understand how to echo data in table list view. please help me to echo this in my table.

below data is the response data which i am getting from ajax call.

{"count":[{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-11","created":"2016-05-26 14:08:06"},"job":{"shipment_title":"Ship goods"}},{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-01","created":"2016-05-26 10:03:25"},"job":{"shipment_title":"Ship goods"}}]}

my cakephp function.

public function fetchDriverlist()
{   
    $this->autoRender = false;        
    $this->loadModel('DispatchedJob');
    $driverlist = array();
    if (isset($this->request['data']['id'])) {
        $driverlist = $this->DispatchedJob->find('all', array(
        'recursive' => -1,
        'conditions' => array('DispatchedJob.driver_id' => $this->request['data']['id']),
        'fields' => array('drivers.name','drivers.mobile','DispatchedJob.startdate','DispatchedJob.created','job.shipment_title'),
        'joins' => array(
                array(
                    'table' => 'drivers',
                    'alias' => 'drivers',
                    'type' => 'LEFT',                   
                    'conditions'=> array('DispatchedJob.driver_id = drivers.id')
                ),  
                 array(
                    'table' => 'jobs',
                    'alias' => 'job',
                    'type' => 'LEFT',                   
                    'conditions'=> array('DispatchedJob.job_id = job.id')
                )         
            ),
            'order' => array('DispatchedJob.id'=>'DESC')
        ));
    }
    header('Content-Type: application/json');           
    return json_encode(array('count' => $driverlist));      
    exit();
}

my ajax script

    <script>
$(document).ready(function() {
     $("#driver").on('change', function() {
        var id = $(this).val(); 
        if (id) {
        var dataString = 'id=' + id;  
        var values = $(this).serialize();
        ajaxRequest= $.ajax({
             url: '<?php echo Router::url(array("controller" => "Drivers", "action" => "fetchDriverlist")); ?>',
            type: 'post',
            data: dataString,
            success: function(response, data) {
            if(data == "success") {           
                var return_data = $.parseJSON(response);
                $("#datatable").html(return_data['count']);
            }
            },
        });
    }
    });
});
</script>

I want to display data in below table

 <table class="table table-striped">
                        <tbody>
                        <tr>                     
                        <th>name</th>
                        <th>mobile</th>
                       <th>startdate</th>
                       <th>shipment title</th>
                        </tr>

                         <tr>                     
                        <th>Lucky</th>
                        <th>9960181380</th>
                       <th>2016-05-11</th>
                        <th>Ship goods</th>
                        </tr>
                       <tr>                     
                        <th>Lucky</th>
                        <th>9960181380</th>
                       <th>2016-05-01</th>
                        <th>Ship goods</th>
                        </tr>
                        </tbody></table>

Answer 1

HTML:

<table class="table table-striped">
    <thead>
       <tr>                     
          <th>name</th>
          <th>mobile</th>
          <th>startdate</th>
          <th>shipment title</th>
       </tr>
   </thead>
   <tbody></tbody>
</table>

JS in ajax success callback:

// Data from your ajax call
var data = {"count":[{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-11","created":"2016-05-26 14:08:06"},"job":{"shipment_title":"Ship goods"}},{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-01","created":"2016-05-26 10:03:25"},"job":{"shipment_title":"Ship goods"}}]};

var trs = [];
for(var i in data.count){
    trs.push("<tr><td>" + data.count[i].drivers.name + 
    "</td><td>" + data.count[i].drivers.mobile + "</td>" +
    "<td>" + data.count[i].DispatchedJob.startdate + "</td>" +
    "<td>" + data.count[i].job.shipment_title + "</td>");
}
$('table tbody').html(trs.join(''));

don't cancat strings in loop, it always allocates memory, so You can easy get out of memory exception.

demo fiddle

Answer 2

Here is your answer:

$(document).ready(function() {

var return_data = {"count":[{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-11","created":"2016-05-26 14:08:06"},"job":{"shipment_title":"Ship goods"}},{"drivers":{"name":"Lucky","mobile":"9960181380"},"DispatchedJob":{"startdate":"2016-05-01","created":"2016-05-26 10:03:25"},"job":{"shipment_title":"Ship goods"}}]};

var tbody_content = "";

$.each(return_data.count, function (index, item) {
  tbody_content += 
    "<tr>" +
      "<td>" + item.drivers.name + "</td>" +
      "<td>" + item.drivers.mobile + "</td>" +
      "<td>" + item.DispatchedJob.startdate + "</td>" +
      "<td>" + item.job.shipment_title + "</td>" +
    "</tr>";
});

$('.table').find('tbody').html(tbody_content);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-striped">
  <thead>
    <tr>                     
      <th>name</th>
      <th>mobile</th>
      <th>startdate</th>
      <th>shipment title</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 3

html:

<table>
<tboday id='print'>
</tbody>
</table>

javascript to display data in table

var tr;
for(var i=0;i<html.length;i++){
tr=tr+"<tr><td>youe_value</td><td>Your_value</td></tr>";
}
$('#print').html(tr);

output

<table>
<thead>
<tr>                     
<th>Job Title</th>
<th>Vehicle Type</th>
</tr>
</thead>
<tbody>
<tr>                     
<td>Your value</td>
<td>Your value</td>
</tr>
</tbody>
</table>

Answer 4

Try this code :

  header('Content-Type: application/json');
   $json= json_encode($Data, JSON_PRETTY_PRINT);
   print_r($json);