CODEWITHSUNDEEP
jqueryajaxjquery-ui-autocomplete
Igor Monteiro
Igor Monteiro

Reputation: 953

Unexpected token < in JSON at position 2 jquery Autocomplete

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" />

Upvotes: 5

Views: 13255

Answers (3)

hoogw
hoogw

Reputation: 5525

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/

Upvotes: 2

RPichioli
RPichioli

Reputation: 3345

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

Upvotes: 2

Phil
Phil

Reputation: 164834

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.

Upvotes: 5

Related Questions