Question

I have a feeling there is a simple answer to this, but I am having a problem when returning my JSON data to the JQuery UI Autocomplete function. I am using the ‘label’ and ‘value’ fields so I can store an id field. The problem is I am unable to parse the values in the object once they are passed back to the JQuery function.

in ASP.NET C#, I have an object:

public class AutoCompleteItem
{
    public string label { get; set; }
    public string value { get; set; }
}

and setting them into a list, formatting as JSON and then returning:

List<AutoCompleteItem> autoCompleteItems = new List<AutoCompleteItem>();
// Loop through data, add objects to list
var oSerializer = new JavaScriptSerializer();
string sJSON = oSerializer.Serialize(autoCompleteItems);
return sJSON;

JSON data after being passed to JQuery:

"[{"label":"Steve","value":"ID4545"},{"label":"Joe","value":"ID1212"},{"label":"Rick","value":"ID6767"}]"

and this is the function i am using to try and get the data from the JSON:

success: function (data) {
      response($.map(data.d, function (item) {
          return {
              label: item.label,
              value: item.value
          }
                                }));
},

I noticed that before I used the ‘label’, ‘value’ format, I had it working with just an IList string. The data passed did not have quotes on the outside, whereas my original example does

["Steve", "Joe", "Rick"]

I don’t know if this is related to the problem or not, but I have tried a number of things to no avail. Any help is appreciated!

Answer 1

There’s no .d property in the JSON you have shown. So:

success: function (data) {
    response(
        $.map(data, function (item) {
            return {
                label: item.label,
                value: item.value
            };
        })
    );
},

But if you use an ASP.NET Page method then you have the .d property and you don’t need to manually serialize the JSON. For example, you could have the following PageMethod in your code behind:

[WebMethod]
public static List<AutoCompleteItem> GetAutoCompleteValues(string term)
{
    // the term variable will contain what the user entered so far

    var autoCompleteItems = new List<AutoCompleteItem>();
    // Loop through data, add objects to list
    return autoCompleteItems;
}

and then:

source: function(request, response) {
    $.ajax({
        url: '/foo.aspx/GetAutoCompleteValues',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ term: request.term }),
        success: function(data) {
            response(
                $.map(data.d, function(item) {
                    return {
                        label: item.label,
                        value: item.value
                    };
                });
            );
        })
    });
});