Can't parse JSON with JQuery autocomplete

Question

I'm trying to create an autocomplete text box using VB .Net4. It has a json back-end that simply returns a first name and last name, like so:

{"d":"[{\"firstN\":\"john\",\"lastN\":\"doe\"},{\"firstN\":\"another \",\"lastN\":\"dude\"},{\"firstN\":\"dsaf\",\"lastN\":\"asdfasdf\"}]"}

My JQuery seems like a pretty standard bit of code:

$("#MainContent_autocomplete").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/PatientLookup.asmx/LookupPatient",
                        dataType: "json",
                        type: "POST",
                        data: "{ 'key': '" + request.term + "' }",
                        contentType: "application/json; charset=utf-8",
                        processData: true,
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {                                
                                    label: item.firstN,
                                    value: item.firstN
                                }
                            }));
                        }
                    });
                },
                minLength: 2
            });

The problem occurs in the success function. When it gets inside the map function it simply will not let me read the firstN and lastN data.

Are you sure that the returned jSon is valid? I think that it comes from the double quotes before and after the square brackets. — Zakaria
– Zakaria, Commented Mar 8, 2011 at 19:36

Dave Ward · Accepted Answer · 2011-03-08 21:51:38Z

1

Judging by the quoted array, it looks like you're returning a string value that you've manually JSON serialized using JavaScriptSerializer or DataContractJsonSerializer, like:

public string LookupPatient(string key) {
  // Something that returns a string of JSON here.
}

Is that right?

If so, you should let .NET handle the serialization for you. Like this:

public class Name {
  public string firstN { get; set; }
  public string lastN { get; set; }
}

public List<Name> LookupPatient(string key) {
  List<Name> result = new List<Name>();

  result.Add(new Name() { firstN = "Dave", lastN = "Ward" });
  result.Add(new Name() { firstN = "John", lastN = "Doe" });

  // JSON serialization happens automatically here.
  return result;
}

If you already have an appropriate view model or DTO class, obviously you can reuse that instead of creating the Name class specifically for this one method.

answered Mar 8, 2011 at 21:51

Dave Ward

60.7k14 gold badges119 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

harold Over a year ago

Thanks Dave !! You nailed it.

Albireo · Accepted Answer · 2011-03-08 19:38:27Z

0

Your JSON is invalid: d's value must not be quoted, and you're escaping the quotes:

{
    "d": [
        {
            "firstN": "john"
            , "lastN": "doe"
        }
        , {
            "firstN": "another"
            , "lastN" : "dude"
        }
        , {
            "firstN": "dsaf",
            "lastN": "asdfasdf"
        }
    ]
}

answered Mar 8, 2011 at 19:38

Albireo

11.1k14 gold badges66 silver badges96 bronze badges

2 Comments

harold Over a year ago

Thanks. That was the format which the >net serializer spit out. I'll take a closer look.

Albireo Over a year ago

@harold: Are you using .NET's DataContractJsonSerializer? I used it once some time ago and it worked well.

Collectives™ on Stack Overflow

Can't parse JSON with JQuery autocomplete

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related