Return data from C# to jQuery UI autocomplete

Question

I want to populate my autocomplete with data from database. So I wrote a method in c# to read it from db:

public string[] GetNames()
{
    var names = unitOfWork.deviceRepository.Get().Select(w=>w.Name);
    return names.ToArray();
}

And this works just fine. All needed data is in names.

Now Ajax I'm using to get this data to client side:

$(function () {
    var availableTags;
    $.ajax({
        url: "/DeviceUsage/GetNames",
        type: "GET",
        error: function (data) {
            alert("wystąpił nieokreślony błąd " + data);
        },
        success: function (data) {
            console.log(data);
            availableTags = data;
        }
    })
    $("#deviceName").autocomplete({
        source: availableTags
    });
});

As You can see I'm leaving dataType for intelligent guess. But the console.log in success writes System.String[] in console instead of data from GetNames. Can anyone suggest me how to modify my code to get the autocomplete work?

Answer 1

dataType is not for C# or MVC or server side, this is to tell jQuery that you are using json response and jQuery should parse it. Since you are not providing it, jQuery will not parse it and thus data is just an string. If you want json, then provide it or use JSON.parse to parse your data string.

Either -

$.ajax({
        url: "/DeviceUsage/GetNames",
        type: "GET",
        dataType: "json",
        error: function (data) {
            alert("wystąpił nieokreślony błąd " + data);
        },
        success: function (data) {
            console.log(data);
            availableTags = data;
        }
    })

or -

$.ajax({
        url: "/DeviceUsage/GetNames",
        type: "GET",
        error: function (data) {
            alert("wystąpił nieokreślony błąd " + data);
        },
        success: function (data) {
            var jsonData = JSON.parse(data);
            console.log(jsonData);
            availableTags = jsonData;
        }
    })

And also, you are not waiting for the ajax to complete before you assign -

$("#deviceName").autocomplete({
        source: availableTags
    });

you should wait for ajax to complete, so take this call inside success like this -

success: function (data) {
            //do proper parsing as mentioned earlier
            availableTags = jsonData;
            $("#deviceName").autocomplete({
                 source: availableTags
             }); 
        }

because at the moment of call availableTags has nothing in it.

Answer 2

If you are just expecting a comma-separated string as a return value you could change your GetNames function to return a string and concat the array using the String.Join function.

return String.Join(", ", unitOfWork.deviceRepository.Get().Select(w=>w.Name).ToArray());

---

But I would personally recommend using some type of json value response and return an array of strings as a json string (easily parsed by JavaScript).

Something like (using newtonsoft json.net, following sample is not tested):

return JsonConvert.SerializeObject(unitOfWork.deviceRepository.Get().Select(w=>w.Name).ToArray());