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>

Try format your code properly, then we can help you further, or your problem might even be solved by it. — CerebralFart, Feb 12 '15 at 14:25
How is this different from the question [you posted earlier](http://stackoverflow.com/questions/28476038/how-to-insert-json-data-in-to-table)? — Andy, Feb 12 '15 at 14:26

score -1 · Answer 1 · answered Feb 12 '15 at 14:17

-1

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

answered Feb 12 '15 at 14:17

Luca Olivieri

303
1
8

data returned by ajax are ok? with the index data[i]? – Luca Olivieri Feb 12 '15 at 14:24

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

1 Answers1

Linked