FOLLOW

Wednesday, January 17, 2018

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');