How To Display JSON Data In a Table Using jQuery?

ViewUserData.php

<?php
$DatabaseServer = "localhost";
$DatabaseUsername = "root";
$DatabasePassword = "root";
$DatabaseName = "demo";

$Connection = mysqli_connect($DatabaseServer , $DatabaseUsername ,  $DatabasePassword , $DatabaseName); 

if($Connection=== false){
    die("ERROR: Could not connect. " . mysqli_connect_error());
}

$SQL = mysqli_query($Connection, "SELECT * FROM User");

$Result = array();

while($Row = mysqli_fetch_assoc($SQL))
    {
       $Result[] = array(
          'UserID' => $Row['UserID'],
          'FirstName' => $Row['FirstName'],
          'LastName' => $Row['LastName']                    
       );
    }
    echo  json_encode($Result);
?>

Output:
JSON Array:
[{"UserID":"1","FirstName":"Ram","LastName":"Sri"}]

ViewUserData.html

<Html>

<head>
<script language="JavaScript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready (function () {
            $.getJSON ("ViewUserData.php",
                function (json) {
                    var tr;
                    for (var i = 0; i < json.length; i++) {
                        tr = $('<tr/>');
                        tr.append("<td>" + json[i].UserID + "</td>");
                        tr.append("<td>" + json[i].FirstName + "</td>");
                        tr.append("<td>" + json[i].LastName + "</td>");
                        $('table').append(tr);
                    }
                });
        });
</script>
</head>

<body>

<table border='1px'>
    <tr>
        <th>User ID</th>
        <th>First Name</th>
        <th>Last Name</th>
    </tr>
</table>

</body>
</html>

Output:







MySQL: Run these two queries

CREATE TABLE `user` (
  `UserID` int(12) NOT NULL,
  `FirstName` varchar(48) NOT NULL,
  `LastName` varchar(48) NOT NULL,
  `Email` varchar(128) NOT NULL,
  `City` varchar(48) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `user` (`UserID`, `FirstName`, `LastName`, `Email`, `City`) VALUES
(1, 'Ram', 'Sri', 'zzz@zzz.com', 'Delhi'),
(2, 'Krishna', 'Vasudev', 'yyy@yyy.com', 'Delhi');

1 comment:

  1. Magnificent website. Lots of useful information here. I am sending it to a few buddies ans additionally sharing in delicious. And obviously, thanks for your sweat!seiko watches for women

    ReplyDelete

Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Popular Posts