Unexpected token < in JSON at position 2 jquery Autocomplete

Question

I have an AJAX request with jQuery "autocomplete", like code bellow:

    var clientesList = [];

    $("#clientes").autocomplete({
        source: function (request, callback) {
            $.ajax({
                type: "POST",
                url: "../../../Cliente/GetClientesByName",
                data: "{'nome':'" + request.term + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    debugger;
                    callback($.map(data.cities, function (obj) {
                        return obj.Main
                    }))
                }
            })
        }
    })

When the event is triggered, the error is showed in jquery.min??

"Create:2 Uncaught SyntaxError: Unexpected token < in JSON at position 2"

My input HTML is this:

<input type="text" id="clientes" class="form-control col-md-10" />

Priddy

Your remote service could be returning HTML and not JSON. Also, your data is not valid JSON. Try data: JSON.stringify({nome: request.term}). The two could be related (bad data -> HTML error response) – Defeasible

Extending @Phil's comment, only quotes are valid string delimiters in JSON, not apostrophes. JSON may look like Javascript, but it's not. – Valvular

I'd wager your request is being redirected because you're logged out, an error handler has kicked in, or a 404, and the < comes from the fact that you're actually being served a HTML document. – Rooftree

Answer 1

My guess is that due to your malformed JSON data property, your server-side resource is returning an HTML error, hence the unexpected < character in the response.

Fix your data by creating a valid JSON string...

data: JSON.stringify({nome: request.term}),

This will produce a value like

{"nome":"whatever you typed"}

which is valid instead of

{'nome':'whatever you typed'}

which is not due to the single-quotes and possibly worse depending on the value of request.term.

Defeasible

Answer 2

Try to stringify the response data and parse it again, take a look:

(...)
success: function (data) {
    // ----------------------------------------------
    // My suggestion
    // ----------------------------------------------
    // Re-rendering the JSON -> Stringify > Parse
    data = jQuery.parseJSON(JSON.stringify(data));
    // Debugging the JSON object in console
    console.log(data); 
    // ----------------------------------------------

    debugger;
    callback($.map(data.cities, function (obj) {
        return obj.Main
    }))
}
(...)

You can see more about in a relative issue like: Parsing JSON giving "unexpected token o" error

Fend

Answer 3

valid json string must have double quote.

JSON.parse({"u1":1000,"u2":1100})       // will be ok

no quote cause error

JSON.parse({u1:1000,u2:1100})    
// error Uncaught SyntaxError: Unexpected token u in JSON at position 2

single quote cause error

JSON.parse({'u1':1000,'u2':1100})    
// error Uncaught SyntaxError: Unexpected token u in JSON at position 2

You must valid json string at https://jsonformatter.curiousconcept.com/

Kylix