How to insert json data in to table?

Question

I have written php code to generate json data, Now We have to display this json data into table. My php code is able to generate data but not able able to insert into table , please help me on this.

My php code to generate json data booking.php

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
mysql_connect("localhost","root","2180");
mysql_select_db("service");

$query="Select * from customer where services='2'";
$result=mysql_query($query);

if ( $result === false ) {
  die("Can\'t do that: " . mysql_error());
}

$retVal = array();
//MYSQL_ASSOC remove key =field identifier
while( $row = mysql_fetch_array( $result, MYSQL_ASSOC ) ) {
  $retVal[] = $row;
}
echo json_encode( $retVal );

My javascript to print json data to table

<script>    
            function fetchData1(){              
                $(".data-contacts1-js tbody").empty();
                $.get("http://localhost/service/newJobs.php", function(data) {
                    $.each(data, function(i, contact) {
                        $(".data-contacts1-js").append(

                            "<td>" + contact.cust_name + "</td>" +
                            "<td>" + contact.cust_mobile + "</td>" +
                            "<td>" + contact.cust_email + "</td>" +
                            "<td>" + contact.cust_address + "</td>" +

                            );
                    });
                });
            }  

             $(document).ready(function(){
                  $(".data-contacts1-js tbody").empty();
                $('#fetchContacts1').click(function() {
                     fetchData1();
                });
            });

        </script>

Format of JSON which is generated by above php code

[
    {
        "cId": "65",
        "address1": "PWD Road, B Narayanapura, Bengaluru, Karnataka, India",
        "address2": "JSS Layout, Mysore, Karnataka, India",
        "city": "Bangalore",
        "comments": "ds",
        "email": "you@gmail.com",
        "landMark": "PWD Road, B Narayanapura, Bengaluru, Karnataka, India",
        "scheduledDate": "13-Feb-2015",
        "scheduledTime": "10:30 AM",
        "services": "2",
        "userContactNumber": "1220000000",
        "userName": "Gajendra"
    }
]

html code for table

<div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">Carpenter Services</div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                     <table class="data-contacts1-js table table-striped" >
                                          <thead>
                                            <tr>
                                                  <th>ID</th>
                                                  <th>Customer Name</th>
                                                  <th>Customer Mobile</th>
                                                  <th>Customer Email</th>
                                                  <th>Address</th>
                                                  <th>Date</th>
                                                  <th>Time</th>
                                                  <th>Status</th>
                                            </tr>
                                          </thead>
                                      <tbody>

                                      </tbody>
                                    </table>                                    
                                </div>
                                <button id="fetchContacts1" class="btn btn-default" type="submit">Refresh</button>                          
                            </div>
                        </div>
                        <!-- /block -->
                    </div>

Answer 1

isn't php an option to print the table? If yes you can just echo table rows in the foreach loop and that's it:

while( $row = mysql_fetch_array( $result ) ) {
  $retVal[] = $row;
}

becomes something like

while( $row = mysql_fetch_array( $result ) ) {
  $table_row .= "
     <tr>
        <td>$row['cust_name']</td>
        <td>$row['cust_mobile']</td>
        <td>$row['cust_email']</td>
        <td>$row['cust_address']</td>
     </tr>";
}

Answer 2

This is a way to work this with JavaScript

     function fetchData1(){              
                    $(".data-contacts1-js tbody").empty();
                    $.get("http://localhost/service/newJobs.php", function(data) {
                    data=JSON.parse(data); //if the server returns text instead JSON object                       
                     for(var i in data){
                         var tr=$("<tr></tr>");
                         tr.append("<td>" + data[i].cust_name + "</td>" +
                                "<td>" + data[i].cust_mobile + "</td>" +
                                "<td>" + data[i].cust_email + "</td>" +
                                "<td>" + data[i].cust_address + "</td>");
                         $(".data-contacts1-js tbody").append(tr);
                       }
                    });
                }  

                 $(document).ready(function(){
                      $(".data-contacts1-js tbody").empty();
                    $('#fetchContacts1').click(function() {
                         fetchData1();
                    });
                });

On server script (php) add in first row

header('Content-type: application/json');