1

Tenho esse código em jquey e PHP, preciso que apareça a imagem do produto no auto-complete junto com o nome, na div #resultado. Coloquei o console.log() para ver se estava buscando as informações, e estão, só não está mostrando na div #resultado.

Quando tento procurar algo, retorna esses erros

["in 13001", "in 13004", "in 13005", "in 13006", "in 13007", "in 13008", "in 13010", "in 13011", "in 13014", "in 13016", "in 13018", "in 13019", "in 13020", "in 13021", "in 13022", "in 13025", "in 13026", "in 13027", "in 13028", "in 13029", "in 23008", "in 23009", "in 23010", "in 23012", "in 23013", "in 23014", "in 23020", "in 23021", "in 23022", "in 23023", "in 23025", "in 23027", "in 23028", "in 23030", "in 23031", "in 23033", "in 23034", "in 23035"]

VM1408:1 Uncaught SyntaxError: Unexpected token i in JSON at position 0
    at JSON.parse ()
    at Object.success ((index):792)
    at j (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at x (jquery.min.js:4)
    at XMLHttpRequest.b (jquery.min.js:4)

fetch.php

$connect = mysqli_connect("localhost", "root", "xxx", "xxx");
$request = mysqli_real_escape_string($connect, $_POST["query"]);
$query = "
 SELECT * FROM produtos WHERE nome LIKE '%" . $request . "%'
order by nome ASC";

$result = mysqli_query($connect, $query);

$data = array();

if (mysqli_num_rows($result) > 0) {
    while ($row = mysqli_fetch_assoc($result)) {

        $query2 = "
 SELECT * FROM fotos_produtos WHERE id_produto='" . $row['id'] . "'
";
        $result2 = mysqli_query($connect, $query2);

        if (mysqli_num_rows($result2) > 0) {
            while ($row2 = mysqli_fetch_assoc($result2)) {
                $data[] = $row["nome"]."<img src='ulpoads/".$row2["nome"]."' />";
            }
        }
    }


    echo json_encode($data);
}

Jquery

$(document).ready(function() {
    $("#resultado").typeahead({
        source: function(b, a) {
            $.ajax({
                url: "fetch.php",
                method: "POST",
                data: {
                    query: b
                },
                dataType: "json",
                success: function(c) {
                    console.log(c);
                    var json = JSON.parse(c);
                    $.each(json, function(i, data) { 
                            $("#resultado").prepend(data);
                    });
                }
            })
        }
    })
});
3
  • Me parece que o problema é o JSON que você obtém, não o seu código. Adicione o JSON na pergunta, se possível. Commented 10/08/2017 às 11:35
  • o Json faz no arquivo fetch.php echo json_encode($data); Commented 10/08/2017 às 11:36
  • editei minha perrgunta, olha lá pra ficar mais claro Commented 10/08/2017 às 11:42

1 Resposta 1

1

O problema ocorre no Javascript, na linha onde você chama o método JSON.parse.

Ocorre que a variável c que a função recebe já é um objeto JSON válido, e não uma string. Você só deve usar JSON.parse em strings.

Já sobre o motivo de c ser um objeto e não uma string, repare que para a requisição Ajax você utilizou a opção dataType: "json". Isso garante que o parâmetro passado para a sua função de sucesso já é um JSON.

Para comprovar, teste os seguintes trechos de código no navegador. Repare que a direrença está nas aspas simples.

Código que converte uma string para um objeto:

var json = JSON.parse('["in 13001", "in 13004", "etc."]');

Código que dá erro:

var json = JSON.parse(["in 13001", "in 13004", "etc."]);

Forma de associação mais curta:

var obj = ["in 13001", "in 13004", "etc."];

E o que você provavelmente quer fazer com o seu código:

success: function(c) {
    console.log(c);
    $.each(c, function(i, data) { 
        $("#resultado").prepend(data);
    });
}
4
  • Legal, agora não retornou nenhum erro e no console busca o nome e o nome da imagem, só que o resultado do auto-complete ainda não aparece na div #resultado Commented 10/08/2017 às 12:04
  • Olha, sendo typeahead, eu recomendo usar Bloodhound pra facilitar as coisas. Eu confesso que eu não saberia fazer sem o Bloodhound. Commented 10/08/2017 às 12:06
  • hmm. não conheço o Bloodhound tem alguma referência, ou poderia me dizer como faria para implementar no meu código? Commented 10/08/2017 às 12:09
  • @WagnerMartinsBodyboard Bloodhound é o motor de sugestão do typeahead. No link tem a documentação oficial dele, no mesmo repositório do typeahead. Pra usar, você cria uma instância do Bloodhound e usa essa instância no parâmetro source do typeahead. Commented 10/08/2017 às 12:58

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 .