javascript - How to populate Table with JSON object which is return by php url?

Question

From php server we are getting json data, Now we have to populate table with json data after clicking refresh button. Data is coming but it undefined for every column, and repeated many time, please help me on this.

myphp code for generating json data

<?php
header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
mysql_connect("localhost","root","2121");
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 );

format of json data generated by above 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"
    }
]

Java script please check alert(data), there is only one data into data base this so only one time it should print but is printing more than one time, I think problem is here

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

                       for(var i in data){
                         alert(data);
                         var tr=$("<tr></tr>");
                         tr.append(
                                "<td>" + data[i].ID + "</td>" +
                                "<td>" + data[i].userName + "</td>" +
                                "<td>" + data[i].cust_name + "</td>" +
                                "<td>" + data[i].userContactNumber + "</td>" +                           
                                "<td>" + data[i].email + "</td>" +
                                "<td>" + data[i].address1 + "</td>" +
                                "<td>" + data[i].scheduledDate + "</td>" +
                                "<td>" + data[i].scheduledTime + "</td>");
                         $(".data-contacts1-js tbody").append(tr);
                         i++;
                       }
                    });
                }  

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

myhtml 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

i'm not sure but try $.getJSON() instead of $.get()