0

Sou iniciante com PHP e estou tendo um problema ao retornar dados do BD para apresenta-los no Front-End com AJAX e JS. Creio que não estou sabendo tratar os dados, pois até o console do navegador, os dados são retornados corretamente, mas ao tentar coloca-los no front, tenho um "undefined" como resposta. Alguém sabe me dizer onde estou errando ?

Meu código no index.php:

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Testando API</title>
</head>

<body>

<p id="fornecedorNome"></p>


<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/script.js"></script>

</body>
</html>

Meu código que puxa os dados:

<?php
$servidor = 'localhost';
$usuario = 'root';
$senha = '';
$dbname = 'testevip';

$connect = mysqli_connect($servidor, $usuario, $senha, $dbname);

$result = "SELECT nome from fornecedores ORDER BY nome ASC LIMIT 30";
$query = mysqli_query($connect, $result);

foreach ($query as $key => $fornecedorNome) {
    print_r(json_encode($fornecedorNome));
}
?>

Meu código no JS / AJAX:

function loadDados() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
            if (xmlhttp.status == 200) {
                var data = xmlhttp.responseText;
                console.log(data);

                var html = "";
                for (var i = 0; i < data.length; i++){
                    var fornecedorNome = data[i].nome;
                    html += "<p>" + fornecedorNome + "</p>";
                }
                document.getElementById("fornecedorNome").innerHTML = html;
            }
            else if (xmlhttp.status == 400) {
                alert('There was an error 400');
            }
            else {
                alert('something else other than 200 was returned');
            }
        }
    };

    xmlhttp.open("GET", "API.php", true);
    xmlhttp.send();
}
loadDados();

E por fim a resposta que tenho no meu navegador: http://prntscr.com/nqxvyf

Agradeço desde já a qualquer ajuda fornecida, muito obrigado !

2
  • Você consegue dar um print no retorno do console? As vezes a resposta esta vindo aninhada de forma que seu for não esteja percorrendo os índices de forma correta. Aparentemente você tem um array de arrays contendo os nomes que você precisa, no seu código PHP tenta utilizar json_encode somente após interar toda sua massa de dados. 20/05/2019 às 12:59
  • Acredito que o erro é devido ao loop de print_r que você está fazendo. Tenta assim troca o foreach ($query as $key => $fornecedorNome) {print_r(json_encode($fornecedorNome));} por echo json_encode($query) e verifica se dá certo; assim você receberá o objeto completo para fazer suas interações no loop do JS. 20/05/2019 às 13:11

1 Resposta 1

4

Faça o seguinte: retorne o JSON numa array no PHP:

foreach ($query as $key => $fornecedorNome) {
    $json[] = $fornecedorNome;
}

print_r(json_encode($json));

E no JavaScript faça o parse:

var data = JSON.parse(xmlhttp.responseText);

O resultado será como o print abaixo, onde você poderá iterar:

inserir a descrição da imagem aqui

Do jeito que está fazendo está retornando um JSON inválido. Note que no seu print não há separação dos objetos por vírgula. Retornando em forma de array, as vírgulas são adicionadas automaticamente, pois cada objeto é um item da array.

6
  • Não esqueça de alterar na linha var fornecedorNome = data[i].nome; para var fornecedorNome = data[i]; Já que você não atribuiu uma chave para os elementos do array; Para continuar com o loop atual você deverá fazer $json['nome'][] = $fornecedorNome; no php 20/05/2019 às 13:27
  • Não precisa. Cada item do JSON tem um índice (adicionei um print na resposta), logo var fornecedorNome = data[i].nome será o valor da chave nome de cada índice.
    – Meu ovo
    20/05/2019 às 13:31
  • Bom dia Sam, consegui fazer a resposta aparecer corretamente em minha TAG <p>. Só que, se eu tentar alterar para um <input> ou um <select>, já não tenho mais a funcionalidade. Para eu conseguir jogar esse resultado em um select ou em um input com autocomplete, tenho que mudar algo no código ?
    – leozera
    20/05/2019 às 13:35
  • Bom dia. Dependendo do que vc quer fazer, basta alterar a forma de tratar o resultado. No caso de um select, vc criaria option em vez de <p>, tipo assim: html += "<option value='qual valor?'>" + fornecedorNome + "</option>"
    – Meu ovo
    20/05/2019 às 13:38
  • Entendi. Por fim, há alguma forma de eu fazer uma "sincronia" com os dados ? Por exemplo, ao invés de eu trazer apenas os "nomes", trazer também os dados de "id" e "cnpj", e assim que eu selecionar o nome do fornecedor, por exemplo, o seu ID e CNPJ mudam automaticamente para os deste fornecedor selecionado.
    – leozera
    20/05/2019 às 13:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .