I want to fetch array of database elements into table

Question

I am trying to fetch array of my database into table by json object but it gives me my database first row as element of table and other as last database row .The middle rows are not shown in output. here is my code

  <script id="source" language="javascript" type="text/javascript">

 $(function () 
 {
   $.ajax({                                      
  url: 'example.php',             
  data: "",                       
                                   //for example "id=5&parent=6"
  dataType: 'json',                //data format      
  success: function(data)          //on recieve of reply

        {   
    for(var i = 0; i < data.length; i++){
var uid = data[i];             
var firstname = data[i];       
var lastname = data[i];
var email = data[i];
var username = data[i];
var password = data[i];
    }
        $('#output').html("<b>uid: </b>"+uid+"<b> firstname:   </b>"+firstname+"<b> lastname: </b>"+lastname+"<b> email: </b>"+email+"<b> username: </b>"+username+"<b> password: </b>"+password); 


    } 
   });
   }); 
   </script>

example.php

<?php

// server info
 $server = 'localhost';
 $user = 'root';
 $pass = '';
 $db = 'ocean';

 $connection = mysql_connect($server, $user, $pass) or die(mysql_error());
$database = mysql_select_db($db) or die(mysql_error());


  $result = mysql_query("select * from oops");        //query

  $array = array();

 while ($row = mysql_fetch_row($result)) {
 $array[] = $row;
 }

 echo json_encode($array);



  ?>

how should prepare that output in proper mannar

Answer 1

First:

$('#output').html("<some code>");

overwrites contents of #output everytime. So, you see only the last result. I think you should use either append():

$('#output').append("<some code>");

Or collect all rows into a variable and use html() once:

var html = "";
for(var i = 0; i < data.length; i++){
    var uid = data[i];             
    var firstname = data[i];       
    var lastname = data[i];
    var email = data[i];
    var username = data[i];
    var password = data[i];

    html += "<b>uid: </b>"+uid+"<b> firstname:   </b>"+firstname+"<b> lastname: </b>"+lastname+"<b> email: </b>"+email+"<b> username: </b>"+username+"<b> password: </b>"+password; 
}
$("#output").html( html );

Second:

var uid = data[i];             
var firstname = data[i];       
var lastname = data[i];

all this variables points to one value data[i]. Maybe it's:

var uid = data[i].uid;             
var firstname = data[i].firstname;       
var lastname = data[i].lastname;

?

Update:

If you want to show data as table rows you can do something like:

html += "<tr>\
    <td><b>uid: </b>"+uid+"<b></td>\
    <td><b>firstname: </b>"+firstname+"</td>\
    <td><b> lastname: </b>"+lastname+"</td>\
    <td><b> email: </b>"+email+"</td>\
    <td><b> username: </b>"+username+"</td>\
    <td><b> password: </b>"+password+"</td>\
</tr>";

And after that:

$("#output").html( "<table>" + html + "</table>" );

Answer 2

You can replace your ajax call: $.ajax({ dataType: "json", url: url, data: data, success: success });

with this Using JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$.getJSON("ajax/test.json", function(data) {
  var items = [];
  $.each(data, function(key, val) {
    items.push("<li id='" + key + "'>" + 
    "<b>uid: </b>" + value.uid + 
    "<b> firstname:   </b>" + value.firstname + 
    "<b> lastname: </b>" + value.lastname + 
    "<b> email: </b>" + value.email + 
    "<b> username: </b>" + value.username + 
    "<b> password: </b>" + value.password + "</li>");
  });

  $("<ul/>", {
    "class": "my-new-list",
    html: items.join("")
  }).appendTo("body");
});

In your JavaScript, when you use this:

var uid = data[i];             
var firstname = data[i];
...
var username = data[i];
var password = data[i];

You are setting all these variables with the same value data[i]. If you want to try with to use you JavaScript try this instead:

var uid = data[i].uid;             
var firstname = data[i].firstname;       
...
var username = data[i].username;
var password = data[i].password;

Therefore, your code will be like:

$(function() {
  $.ajax({
      url: 'example.php',
      data: "",
      //for example "id=5&parent=6"
      dataType: 'json', //data format      
      success: function(data) {
        data.forEach(function(entry) {
            var uid = entry.uid;
            var firstname = entry.firstname;
            var lastname = entry.lastname;
            var email = entry.email;
            var username = entry.username;
            var password = entry.password;
          }
          $('#output').append("<b>uid: </b>" + uid +
            "<b> firstname:   </b>" + firstname +
            "<b> lastname: </b>" + lastname +
            "<b> email: </b>" + email +
            "<b> username: </b>" + username +
            "<b> password: </b>" + password);
        });
    }
  });
});