show JSON data(from php file) in table using ajax

Question

I hava a php code as shown below serverdata.php

<?php

require_once('database.php');
header("Content-type: application/json");  

$sql = "SELECT * FROM user";
$result = mysql_query($sql);
$uid = array();
$uname = array();


while($row = mysql_fetch_assoc($result)) 
   {
     $dataarray[] = $row;
   }

  echo json_encode($dataarray); 
?>

which produce the following output in JSON format:

[{"id":"1","username":"Sagun","password":"61b51ae250c7e7505191e4d5e6240c04"},{"id":"2","username":"roshan","password":"d6dfb33a2052663df81c35e5496b3b1b"},{"id":"17","username":"rajiv","password":"9a9af43c15771eaf3b2db8bb28a2829d"}]

All i want is to get the data from above php file that is in json format and display it in table in another page using AJAX. Please guide me through it.

 ID USERNAME PASSOWRD 
  1   sagun   61b51...    
  2   roshan  d6dfb.. 
 17   rajiv   9a9af..

wkyip · Accepted Answer · 2015-08-18 10:36:50Z

1

This is the ajax function to get your json data from php output, try to modify as you need.

<script type="text/javascript">
$(function() {
    $.ajax({
        type      : 'POST',
        url       : 'YOUR_PHP_URL',
        data      : {},
        dataType  : 'json',
        error     : function (a, b, c) 
        {

        },
        success   : function(data) 
        {
            console.log( data );
        }
    });
});
</script>

Don't forget to include the jQuery library. https://developers.google.com/speed/libraries/#jquery

answered Aug 18, 2015 at 10:36

wkyip

5004 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mayank Vadiya · Accepted Answer · 2015-08-18 11:16:16Z

1

This code for build table in jquery

<script type="text/javascript">
function jsonData()
{

    $.ajax({
        type:'post',
        url:"serverdata.php",
        datatype:'json',
        success:function(data)
        {
            var jdata=$.parseJSON(data);
            ///console.log(jdata);
            $(function(){
                $.each(jdata,function(i,item){
                    var tr = $('<tr>').append(
                    $('<td>').text(item.id),
                    $('<td>').text(item.name),
                    $('<td>').text(item.email),
                    //$('<td>').text(item.password),
                    $('<td>').text(item.mob_num),

                );
                $("#tableId tbody").append(tr); 
                //console.log(tr.wrap('<p>').html());
                })
            })

        }
    })
}

edited Aug 18, 2015 at 11:16

answered Aug 18, 2015 at 10:54

Mayank Vadiya

1,4512 gold badges19 silver badges32 bronze badges

2 Comments

Sagun Gautam Over a year ago

could not get any data i don't know what is problem. :(

Mayank Vadiya Over a year ago

please give your script

Itz Raghu · Accepted Answer · 2015-08-18 16:22:03Z

0

database.php

    <?php
try{
    $db = new PDO('mysql:host=localhost;dbname=testing', "root" , "");


}catch(PDOException $e){
    print "error in connection" . $e->getMessage();
}

home.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSON data</title>
</head>
<body>

  <table id="demoTable">
    <thead>
      <tr>
        <td ><label>Id</label></td>
        <td ><label>Username</label></td>
        <td ><label>Password</label></td>
      </tr>
    </thead> 
    <tbody>  
    </tbody>  
  </table>
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="detail.js" type="text/javascript"></script>
</body>
</html>

details.js

$(document).ready(function() {

    $.ajax({
        url:'serverdata.php',
        type:'POST',
        success:function(data){

            var result = $.parseJSON(data);
            $.each(result, function(key, value){
                $.each(value, function(k, v){
                    if(k === "id"){
                        $("#demoTable >tbody:last").append(
                            $('<tr>').append(
                                $('<td>').append(v)
                                .append(
                                    $('</td>').append(
                                        $('</tr>')
                                        )
                                    )
                                )
                            );
                    }
                    if(k === "username"){
                        $("#demoTable >tbody >tr:last").append(

                            $('<td>').append(v)
                            .append(
                                $('</td>')

                                )

                            );
                    }
                    if(k === "password"){
                        $("#demoTable >tbody >tr:last").append(

                            $('<td>').append(v)
                            .append(
                                $('</td>')

                                )

                            );
                    }
                });
            });
        }
    })      
});

serverdata.php

<?php
require_once 'database.php';
$data = array();
$stmt = $db->query('SELECT * FROM user');
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($row as $key => $value) {
    $data[$key] = $value;
    $result = json_encode($data);
}
echo $result;

edited Aug 18, 2015 at 16:22

answered Aug 18, 2015 at 11:01

Itz Raghu

4572 gold badges6 silver badges16 bronze badges

10 Comments

Sagun Gautam Over a year ago

tried so many tutorial, m not getting it

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>         <script src="details.js"></script>     <body>               <table>          <thead><tr>                  <th>ID</th>                  <th>Username</th>                  <th>password</th>          </tr></thead>          <tbody id="mytable">              <tr>                  <td id="userid"></td>                  <td id="username"></td>                  <td id="password"></td>              </tr>          </tbody>      </table>

Itz Raghu Over a year ago

see my updates and try again .. hope it will help you

Sagun Gautam Over a year ago

your code works great when i use json file.. but not working when i use php file. here is the php file if any thing i need to change ?

<?php header("Content-type: application/json");   require('database.php');   $sql = "SELECT * FROM user"; $result = mysql_query($sql); $uid = array(); $uname = array();   while($row = mysql_fetch_assoc($result))     {      $dataarray[] = $row;    }       echo json_encode($dataarray);      ?>

Itz Raghu Over a year ago

it means...now you want to retrieve data in json format.. is it??

Sagun Gautam Over a year ago

that above php code generate data in JSON format, [["1","Sagun","61b51ae250c7e7505191e4d5e6240c04"],....... cant we use that php file ?? i dont want to save it in JSON file. retrive it only

|

Collectives™ on Stack Overflow

show JSON data(from php file) in table using ajax

3 Answers 3

Comments

2 Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related