add data dynamically from JSON array to HTML table using JQuery

Question

php file:

   <?php
mysql_connect("127.0.0.1");
mysql_select_db("test"); 
$sql=mysql_query("select first,last,email,city from userdata"); 
while($row=mysql_fetch_assoc($sql))
$output[]=$row;
print(json_encode($output)); 
   mysql_close(); 
?>

json output:

[{"first":"nag","last":"ch","email":"[email protected]","city":"guntur"},{"first":"hari","last":"ch","email":"[email protected]","city":"guntur"}]

html code:

 <script>
    $(document).show(function(){
    });

        $("#userdata tbody").html("");
        $.getJSON("http://127.0.0.1/reg/userdata.php",function(data){
              $.each(data,function(i,user){
                    var tblRow =
                        "<tr>"
                          +"<td>"+user.first+"</td>"
                          +"<td>"+user.last+"</td>"
                          +"<td>"+user.email+"</td>"
                          +"<td>"+user.city+"</td>"
                        +"</tr>"
                    $(tblRow).appendTo("#userdata tbody");
                });
            }
        );
    </script>

i was displayed data from database using php in JSON format..i want to insert this data into table format in html page, i created table in html also..i tried using above script but it didn't fetch any data..plz help me plz..

Have you actually confirmed that JSON output? I am not sure how you are getting all those results from that select query - I would expect to see a single field for each array entry. — mwotton
– mwotton, Commented Jun 28, 2012 at 6:55

Starx · Accepted Answer · 2012-06-28 09:41:21Z

0

Your PHP is printing the array in an incremented format.

Make the following changes:

print(json_encode($row));

Next, there is no userdata in the output, so just use data.

answered Jun 28, 2012 at 9:41

Starx

79.3k50 gold badges187 silver badges265 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

nag Over a year ago

am not getting output...it shows empty table, will u plz modify the code plz

Starx Over a year ago

@user1310385, I would to be happy to fix the problem. Create your issue in jsfiddle.net and post the link :)

nag Over a year ago

now i am using localhost..can we create demo even if u are using localhost.

Starx Over a year ago

Just use the js and html portion, the php is not required to show the issue i guess.

nag Over a year ago

i have sent the link plz check it once

|

xdazz · Accepted Answer · 2012-06-29 02:07:14Z

0

According by your php code, the data is an array, and there is no userdata property.

$.each(data.userdata, function(i,user){

should be

$.each(data, function(i,user){

THE DEMO.

edited Jun 29, 2012 at 2:07

answered Jun 28, 2012 at 6:54

xdazz

161k38 gold badges255 silver badges278 bronze badges

Collectives™ on Stack Overflow

add data dynamically from JSON array to HTML table using JQuery

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related