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

16 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
  6. Thank you so much for providing such a useful content. Digital Signature Certificate

    ReplyDelete
  7. Thanks very nice share this concept is a good way to enhance the knowledge. Digital Signature Certificate

    ReplyDelete
  8. Thanks For Sharing This, Very Interesting And Helpful Support Provide By this blog, This was the first news blog. Apply Class 3 Digital Signature Certificate

    ReplyDelete
  9. Hii.... I saw your Blog and giving information like this, it will be useful for individuals who visits for
    sites more, I likewise have a Blog and its about Pogo Games.How to solve pogo login issues. Destiny to director reflects on the states of the game and what's coming next on Pogo game.You definitely know more facts about Pogo game. we provide technical support for Pogo game. if you facing any technical issues with Pogo games
    feel free to call us on our toll free number +1-877-870-1221 for more information visit here : https://sites.google.com/view/1-877-870-1221how-to-fix-pogo-/home

    ReplyDelete

More Posts

FOLLOW