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)

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

10 comments:

  1. Wow !
    How To Display JSON Data In a Table Using jQuery-I am looking some code JSON.
    Realy your post very nice to me . I will sharing this code

    https://www.radiustheme.com/downloads/eikra-education-wordpress-theme/

    ReplyDelete
  2. I actually take care of such information a lot. I'm interested in this specific info for just a while. Appreciate it and also all the best Led lighting Sydney

    ReplyDelete
  3. We offer university assignment help fulfilling the specific and precise needs of students. Poor quality of an assignment drastically affects the score sheet of a student. Here at Calltutors.com, the writers know how to proceed with an assignment writing task to make the end-result appreciable with world-class university assignment help online. We even welcome the feedback from the client’s end and try to sort out the shortcomings as soon as possible.
    https://www.calltutors.com/Articles/Writing-Assignment-for-University

    ReplyDelete
  4. Led Lights SydneyMany thanks for various other amazing report.

    ReplyDelete
  5. I found your this post while searching for information regarding blog-related research ... It is a good post .. keep posting and updating information.
    business financing singapore

    ReplyDelete

More Posts

FOLLOW