Auto-complete jQuery error with image

1

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

.

When I try to look for something, it returns those errors

  , "in 13004", "in 13005", "in 13006", "in 13007", "in 13008", "in 13010", "in 13011", "in 13014" in 13016, 13018, 13030, 13020, 13020, 13020, 13030, 13022, 13022, 13022, 13022, 13030, 13030, 13030, in 23022 "," in 23022 "," in 23022 "," in 23022 "," in 23022 "," in 23022 "," in 23020 "," in 23023 "," in 23025 "," in 23027 "," in 23028 "," in 23030 "," in 23030 "," in 23031 "," in 23033 "," in 23034 "," in 23035 "]

     

VM1408: 1 Uncaught SyntaxError: Unexpected token 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);
                    });
                }
            })
        }
    })
});
    
asked by anonymous 10.08.2017 / 13:18

1 answer

1

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

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

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

To test, test the following code snippets in the browser. Notice that the direrence is in single quotation marks.

Code that converts a string to an object:

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

Error Code:

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);
    });
}
    
10.08.2017 / 13:52