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>
See Question&Answers more detail:
os