List database data with json/ajax including with createelement

Question

Hello! I am listing the user data of my data group travels json/ajax, the data is captured and arrive in my request file "usuarios.php" but are not being listed.

The code was even working normal, but I don’t know what happened now.

USUARIOS.PHP


<?php
session_start();
if (!isset($_SESSION['id_usuario'])) {
    header("location: index.php");
    exit;
}
require_once 'CLASSES/conectar.php';
$u = new conectar();

$consulta = $pdo->query("SELECT id_usuario,nome,email FROM usuarios;");

$rows = array();
while ($linha = $consulta->fetch(PDO::FETCH_ASSOC)) {
    $rows[] = $linha;
}
echo json_encode($rows);

return;

DESTINO ONDE DEVEM SER INSERIDOS E LISTADOS

<!-- LISTAR USUARIOS -->
        <div class="conteudoArearestrita" id="pcadastrados-id">
            <div id="usuarios-id">
                <h1>Usuarios</h1>
                <table class="table">
                    <thead>
                        <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Nome</th>
                        <th scope="col">E-mail</th>
                        </tr>
                    </thead>
                    <tbody  id="listausuarios">
                    
                    </tbody>
                </table>

<script>
           window.onload = function () {
			var conteudo = new XMLHttpRequest();
			conteudo.onreadystatechange = function () {
				if (conteudo.readyState == 4 && conteudo.status == 200) {
					if (conteudo.responseText) {
                        let data = JSON.parse(conteudo.responseText)
                        console.log(data);
                        //document.getElementById("usuarios-lista").innerHTML = conteudo.responseText;
                        data.forEach(ListaUsuarios);
                      
					}
				}
			}
			conteudo.open("POST", "usuarios.php");
			conteudo.send();
		}

        function ListaUsuarios(element, index, array) {
               
                var tbody = document.getElementById('listausuarios');
                var l1 = document.createElement("tr")
                var c1 = document.createElement("td")
                var c2 = document.createElement("td")
                var c3 = document.createElement("td")
                
                tbody.appendChild(l1);
                l1.appendChild(c1);
                l1.appendChild(c2);
                l1.appendChild(c3);

                c1.innerHTML = element.id_usuario;
                c2.innerHTML = element.nome;
                c3.innerHTML = element.email;
            
            console.log(element.id_usuario);
            console.log(element.nome);
            console.log(element.email);
        }

</script>

            </div>

Answer 1

Include this line at the end of the code:

echo json_last_error_msg();

It will probably show an error if this is the error:

Malformed UTF-8 characters, possibly incorrectly encoded

Change your connection (PDO) passing the UTF-8 parameter.

$pdo = new PDO("mysql:host=$hostname;dbname=$database;charset=utf8",
    $username, $password, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));