Auto-complete jquery error with image

Question

I have this code in jquey and PHP, I need to show the image of the product in auto-complete along with the name, in div #outworking. I put the console.log() to see if he was looking for the information, and are, just not showing in the div #outworking.

When I try to find something, it returns these errors

["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);
                    });
                }
            })
        }
    })
});

Answer 1

The problem occurs in Javascript, on the line where you call the method JSON.parse.

It occurs that the variable c that the function receives is already a valid JSON object, not a string. You should only use JSON.parse string.

On the subject of c be an object and not a string, note that for the Ajax request you used the option dataType: "json". This ensures that the parameter passed to your success function is already a JSON.

To check, test the following code snippets in the browser. Note that the right is in the single quotes.

Code that converts a string to an object:

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

Code that gives error:

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

Shorter form of association:

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

And what you probably want to do with your code:

success: function(c) {
    console.log(c);
    $.each(c, function(i, data) { 
        $("#resultado").prepend(data);
    });
}