Why is it difficult to display data fetched through getJSON?

Question

Why is it difficult to display data fetched through getJSON?

The test-json.php script retrieves data from the database and converts it into JSON format.

<?php
$conn = new mysqli("localhost", "root", "xxxx", "guestbook"); 
$result=$conn->query("select * From lyb limit 2"); 
echo '[';
$i=0;
while($row=$result->fetch_assoc()){  ?>
 {title:"<?= $row['title'] ?>",
        content:"<?= $row['content'] ?>",
        author:"<?= $row['author'] ?>",
        email:"<?= $row['email'] ?>",
        ip:"<?= $row['ip'] ?>"}
<?php 
if(
$result->num_rows!=++$i) echo ',';   
}
echo ']'    
?>

When running select * From lib limit 2 on my database, it fetches the following records:

title    | content   | author   | email            |ip
welcome1 | welcome1  | welcome1 | <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="087f6d646b67656d39487c6765266b687964686c">[email protected]</a> |59.51.24.37
welcome2 | welcome2  | welcome2 | <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6611030a05090b03542612090b4805090b00070b09064e030f0d">[email protected]</a> |59.51.24.38

To execute the script, use

php -f /var/www/html/test-json.php

.

[ {title:"welcome1",
         content:"welcome1",
        author:"welcome1",
         email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f186949d929e9c94c0b1859e9cdf8295979a">[email protected]</a>",
        ip:"59.51.24.37"},
{title:"welcome2",
         content:"welcome2",
        author:"welcome2",
         email:"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1d6c4cdc2ceccc493e1d5cecc91cec3cf">[email protected]</a>",
        ip:"59.51.24.38"}]

The retrieved data in JSON format can be displayed in a table by using JavaScript for calling back.

Below is the HTML code to show the AJAX response in a table:

<script src="http://127.0.0.1/jquery-3.3.1.min.js"></script>
<h2 align="center">Ajax show data in table</h2>
<table>
    <tbody id="disp">
        <th>title</th>
        <th>content</th>
        <th>author</th>
        <th>email</th>
        <th>ip</th>
    </tbody>
</table>

<script> 
$(function(){
    $.getJSON("test-json.php", function(data) {
        $.each(data,function(i,item){
            var tr = "<tr><td>" + item.title + "</td>"    +
                        "<td>"  + item.content  + "</td>" +
                        "<td>"  + item.author  + "</td>"  +
                        "<td>"  + item.email  + "</td>"   +
                        "<td>"  + item.ip  + "</td></tr>"
            $("#disp").append(tr);
        });
    });
});
</script>

After typing 127.0.0.1/test-json.html, you may notice no data being generated on the webpage despite executing test-json.php.

Expected output should look like this in the table:

Ajax show data in table
title   content author  email   ip
welcome1  welcome1  welcome1  <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1067757c737f7d752150647f7d3e777b797d">[email protected]</a>  59.51.24.37
welcome2  welcome2  welcome2  <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0a7b5bcb3bfbdb5e290a4bfbdbe97bab6b4">[email protected]</a>  59.51.24.38

javascript json ajax getjson

Answer 1

Answer №1

It seems like the issue lies in the response generated by your PHP script, which is not valid JSON.

JSON requires object keys to be enclosed in quotes.

Instead of manually creating the JSON response, you can utilize json_encode() function to handle it automatically. Here's an example:

<?php
$conn = new mysqli("localhost", "root", "xxxx", "guestbook"); 
$stmt = $conn->prepare('SELECT title, content, author, email, ip FROM lyb limit 2');
$stmt->execute();
$stmt->bind_result($title, $content, $author, $email, $ip);
$result = [];
while ($stmt->fetch()) {
    $result[] = [
        'title'   => $title,
        'content' => $content,
        'author'  => $author,
        'email'   => $email,
        'ip'      => $ip
    ];
}
header('Content-type: application/json; charset=utf-8');
echo json_encode($result);
exit;

_{You're not obligated to use prepare() and bind_result(); it's just my personal preference while dealing with MySQLi.}

This block of code will generate a result similar to this:

[
  {
    "title": "welcome1",
    "content": "welcome1",
    "author": "welcome1",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="daadbfb6b9b5b7bfeb9aaeb5b7f4b9b5b7">[email protected]</a>",
    "ip": "59.51.24.37"
  },
  {
    "title": "welcome2",
    "content": "welcome2",
    "author": "welcome2",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8b99909f939199cebc889391d29f9391">[email protected]</a>",
    "ip": "59.51.24.38"
  }
]

Answer 2

It seems like the issue lies in the response generated by your PHP script, which is not valid JSON.

JSON requires object keys to be enclosed in quotes.

Instead of manually creating the JSON response, you can utilize json_encode() function to handle it automatically. Here's an example:

<?php
$conn = new mysqli("localhost", "root", "xxxx", "guestbook"); 
$stmt = $conn->prepare('SELECT title, content, author, email, ip FROM lyb limit 2');
$stmt->execute();
$stmt->bind_result($title, $content, $author, $email, $ip);
$result = [];
while ($stmt->fetch()) {
    $result[] = [
        'title'   => $title,
        'content' => $content,
        'author'  => $author,
        'email'   => $email,
        'ip'      => $ip
    ];
}
header('Content-type: application/json; charset=utf-8');
echo json_encode($result);
exit;

_{You're not obligated to use prepare() and bind_result(); it's just my personal preference while dealing with MySQLi.}

This block of code will generate a result similar to this:

[
  {
    "title": "welcome1",
    "content": "welcome1",
    "author": "welcome1",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="daadbfb6b9b5b7bfeb9aaeb5b7f4b9b5b7">[email protected]</a>",
    "ip": "59.51.24.37"
  },
  {
    "title": "welcome2",
    "content": "welcome2",
    "author": "welcome2",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc8b99909f939199cebc889391d29f9391">[email protected]</a>",
    "ip": "59.51.24.38"
  }
]

Answer 3

Answer №2

Your PHP code contains several errors that need to be addressed.

To properly handle server-side operations in PHP, follow these steps:

Filename: test-json.php

Retrieve records from the database.
Create an array (named $data in the provided code) with the retrieved records.
Encode this array in JSON format and output the result.

For handling client-side operations (JavaScript), follow these steps:

Send an AJAX request to the test-json.php file.
If the request is successful, parse the returned JSON data and generate HTML content to be appended to a table.
Append the generated HTML to the table for better performance by accessing the DOM only once per AJAX request.

To implement the solution correctly, refer to the following code snippets:

PHP Code - Filename: test-json.php:

<?php
// Utilize specific column names in the SELECT query instead of '*'.
$conn = new MySQLi("localhost", "root", "xxxx", "guestbook");

$result = $conn->query("SELECT `title`, `content`, `author`, `email`, `ip` FROM `lyb` LIMIT 2");

$data = [];

while($row = $result->fetch_assoc()) {
  $data[] = [
    'title'   => $row['title'],
    'content' => $row['content'],
    'author'  => $row['author'],
    'email'   => $row['email'],
    'ip'      => $row['ip']
  ];
}

header('Content-type: application/json; charset=utf-8');
echo json_encode($data);

JavaScript Code:

$(function(){
    $.getJSON("test-json.php", function(data) {
        var html = '';
        $.each(data,function(key, value){
            html += "<tr><td>" + value.title + "</td>"    +
                        "<td>"  + value.content  + "</td>" +
                        "<td>"  + value.author  + "</td>"  +
                        "<td>"  + value.email  + "</td>"   +
                        "<td>"  + value.ip  + "</td></tr>";

        });
        $("#disp").append(html);
    });
});

Explore more about the json_encode function here.

These instructions should help you progress further.

Answer 4

Your PHP code contains several errors that need to be addressed.

To properly handle server-side operations in PHP, follow these steps:

Filename: test-json.php

Retrieve records from the database.
Create an array (named $data in the provided code) with the retrieved records.
Encode this array in JSON format and output the result.

For handling client-side operations (JavaScript), follow these steps:

Send an AJAX request to the test-json.php file.
If the request is successful, parse the returned JSON data and generate HTML content to be appended to a table.
Append the generated HTML to the table for better performance by accessing the DOM only once per AJAX request.

To implement the solution correctly, refer to the following code snippets:

PHP Code - Filename: test-json.php:

<?php
// Utilize specific column names in the SELECT query instead of '*'.
$conn = new MySQLi("localhost", "root", "xxxx", "guestbook");

$result = $conn->query("SELECT `title`, `content`, `author`, `email`, `ip` FROM `lyb` LIMIT 2");

$data = [];

while($row = $result->fetch_assoc()) {
  $data[] = [
    'title'   => $row['title'],
    'content' => $row['content'],
    'author'  => $row['author'],
    'email'   => $row['email'],
    'ip'      => $row['ip']
  ];
}

header('Content-type: application/json; charset=utf-8');
echo json_encode($data);

JavaScript Code:

$(function(){
    $.getJSON("test-json.php", function(data) {
        var html = '';
        $.each(data,function(key, value){
            html += "<tr><td>" + value.title + "</td>"    +
                        "<td>"  + value.content  + "</td>" +
                        "<td>"  + value.author  + "</td>"  +
                        "<td>"  + value.email  + "</td>"   +
                        "<td>"  + value.ip  + "</td></tr>";

        });
        $("#disp").append(html);
    });
});

Explore more about the json_encode function here.

These instructions should help you progress further.

Why is it difficult to display data fetched through getJSON?

Answer №1

Answer №2

Similar questions

Scroll the content of a div to the bottom using JavaScript

When a child component is updated, React does not automatically re-render

Error encountered while attempting to save a Mongoose post on Heroku, although it is successful

It's time to wrap up the session with some old "cookies" and a closing function

Retrieve the value of a variable in a Bootstrap modal using Jade

The attention remains fixed at the top of the page

The Typescript Decorator is triggered two times

Class component proceeding without waiting for function completion

What is the speed difference between calling functions from require's cache in Node.js and functions in the global scope?

Encountered an issue with reading the property childnotes of null during data retrieval using ajax in PHP

Tips on comparing a string against an object's value

Is it possible to display a thumbnail image in a separate full-sized window by using CSS or JavaScript?

include a button next to the input field

Changing a 64-bit Steam ID to a 32-bit account ID

Using canvas to smoothly transition an object from one point to another along a curved path

Is it possible to submit a form through a JavaScript hotkey?

Move the dist folder to the libs directory using webpack

Guide on how to restrict specific days and dates in MUI React datepicker using a JSON array

Creating a polyBezier or polyCurve with Canvas HTML: a step-by-step guide

Unable to retrieve link text following readFile function. Selector functions properly in Chrome console