Displaying JSON Strings in Div Container

Question

I was able to build out the output for the JSON data, and displays accordingly;

[{ 
"DBColumn1": DataTXT, 
"DBColumn2": DataTXT, 
"DBColumn3": DataTXT, 
} ]

However, I have been having a hell of a time trying to display said data into a simple DIV(preferably)/table container.

Here is code below.

// Print out rows
$prefix = '';
echo "[\n";
while ( $row = mysql_fetch_assoc( $result ) ) {
  echo $prefix . " {\n";
  echo '  "pin_status": ' . $row['pin_status'] . ',' . "\n";
  echo '  "rep_empid": ' . $row['rep_empid'] . ',' . "\n";
  echo '  "rep_email": ' . $row['rep_email'] . ',' . "\n";
  echo '  "rep_username": ' . $row['rep_username'] . ',' . "\n";
  // echo '  "": ' . $row['value2'] . '' . "\n";
  echo " }";
  $prefix = ",\n";
}
echo "\n]";

// Close the connection
mysql_close($link);
?>

Any Help is greatly appreciated. +10 Kudos if you can write a simply DIV layout displaying said information.

This is not throwing errors, or "not working" I am just trying to place the JSON data into a simple DIV/PHP table so that I can view said data.

Just a tip, you should probably refactor to use PDO as the mysql extension are not secure and will be deprecated. — Chris Burton
– Chris Burton, Commented Sep 16, 2015 at 1:50
Please edit to add a specific problem statement — "it doesn't work" can be assumed, but how does it not work? What error message or incorrect behavior is characteristic? — Nathan Tuggy
– Nathan Tuggy, Commented Sep 16, 2015 at 1:51
Why do you make your life complicated? If you want to get a json of that simply use $prefix = json_encode(['pin_status' => $row['pin_status'], ..... ]);` — aldrin27
– aldrin27, Commented Sep 16, 2015 at 1:52
Chris, not sure how to do that. I am probably a 3 on skill out of 10. — Levi
– Levi, Commented Sep 16, 2015 at 2:14

Rod · Accepted Answer · 2015-09-16 03:28:58Z

1

I think that you are trying to return a JSON response to be used in another part of your code.

To get a JSON response you can try it:

...
// Print out rows.
$response = array();
while ( $row = mysql_fetch_assoc( $result ) )
{
    $response[] = array('pin_status' => $row['pin_status'], 'rep_empid' => $row['rep_empid'], 'rep_email' => $row['rep_email'], 'rep_username' => $row['rep_username']);
}

// Response JSON.
header( "Content-Type: application/json" );
// Convert array to JSON.
$response = json_encode($response);

echo $response;

// Close the connection
mysql_close($link);
?>

I supose you will show the table into a new file, you created a new file to show this JSON response? How is the structure of this file.

Are you confused about how to use AJAX ?

Using bootstrap as part of the solution, your Filename.php may looks like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>stackoverflow.com</title>

        <!-- Bootstrap -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>

    <body>

        <div id="contents" class="row">
            <div class="col-md-3">pin_status</div>
            <div class="col-md-3">rep_empid</div>
            <div class="col-md-3">rep_email</div>
            <div class="col-md-3">rep_username</div>
        </div>

        <div id="htmldata"></div>

        <script type="text/javascript">
            jQuery.ajax({
                type: "GET",
                url: "json.php",
                dataType: "json",
                success: function(response){
                    $.each(response, function(key, value){
                        var html = '' +
                            '<div class="col-md-3">'+value.pin_status+'</div>'+
                            '<div class="col-md-3">'+value.rep_empid+'</div>'+
                            '<div class="col-md-3">'+value.rep_email+'</div>'+
                            '<div class="col-md-3">'+value.rep_username+'</div>';
                        $("#contents").append(html);
                    });
                }
            });
        </script>

    </body>
</html>

Note that on this solution the json.php file need to stay on the same domain name of the Filename.php .

edited Sep 16, 2015 at 3:28

answered Sep 16, 2015 at 2:24

Rod

236 bronze badges

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

6 Comments

Levi Over a year ago

Okay, now I have json showing as ["[{"pin_status":"C - Net Only","rep_empid":"3020","rep_email":"[email protected]","rep_username":"lzoesch"},{"pin_status":"C - Net Only","rep_empid":"3020","rep_email":"[email protected]","rep_username":"lzoesch"},{"pin_status":"New - Not Interested","rep_empid":"3020","rep_email":[email protected]","rep_username":"lzoesch"},{"pin_status":"SOLD - FiOS","rep_empid":"3020","rep_email":"[email protected]","rep_username":"lzoesch"}]"[/code]

Rod Over a year ago

Have you created a new file to show this JSON response?

Levi Over a year ago

No. I have a blank html file. Only thing I have is what I posted in OP.

Levi Over a year ago

What I am trying to accomplish is displaying this json data (code posted in OP named json.php) to another file called filename.php. Within Filename.php I would like to display a simple div table of the data that is represented in the json.php output file (JSON) I may not be asking the correct question. I would assume it would be simple php script to display. I am learning, but good at poking at stuff until it works. Ive googled stuff for hours with no luck for what I am trying to accomplish.

Levi Over a year ago

Something like this, but being called from the file path of url.com/json.php ( jsfiddle.net/LZoesch/tuw4zer6 )

|

webdeb · Accepted Answer · 2015-09-16 02:06:41Z

0

...
// to understand where we start
// $prefix = ""; 
$array = array();
while ($row = mysql_fetch_assoc($result)) {
  $array[] = $row;
}

echo "<div>" . json_encode($array, JSON_PRETTY_PRINT) . "</div>";

mysql_close($link);

answered Sep 16, 2015 at 2:06

webdeb

13.3k5 gold badges32 silver badges44 bronze badges

2 Comments

Levi Over a year ago

Not following this answer. Where do I add this? lol. Trying to get it to diplay from my index.html

webdeb Over a year ago

replace you code from prefix till end with it, and finished

Collectives™ on Stack Overflow

Displaying JSON Strings in Div Container

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related