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

Tips on boosting the speed and user-friendliness of your AJAX/REST application

A guide to showcasing a subcategory within a parent category through ajax

Is there a way to modify the state of my spans by utilizing onMouseHover functionality?

It is my goal to populate the array with numbers while avoiding any duplicate entries

Jest - experiencing intermittent test failures on initial run, yet succeeding on subsequent runs

Efficiently reducing the size of a CSS selector string with javascript

Is the string data in JSON format stored in SharedPreferences globally saved?

What is the best way to change a NSString from JSON into an NSDictionary?

When trying to use bootbox.confirm within a dynamically loaded AJAX div, the modal unexpectedly opens and

Is it possible for me to create a list in alphabetical order beginning with the letter B instead of A

Django views are not receiving multiselect data from Ajax requests

Top method for implementing dynamic routing in Express.js (node.js)

Clicking the button in Angular should trigger a series of functions to be

Is there a way to automatically increase a value by clicking on it?

Randomize.js feature following the completion of an asynchronous request

Error: A semicolon is required before the statement in an HTML select tag

Stop IE from caching AJAX requests when using the POST method

Avoiding double entries in the shopping list using DOM selectors in JavaScript

When utilizing AjaxHelper for fetching a partial view, the included data remains constant each time

Error encountered when attempting to initiate a second screenshare on Chrome due to an invalid state