jQuery ajax从get请求中检索数据返回空对象

Question

I have a Jquery ajax call to a Web API that returns a JSON serialized object. This call gets the JSon object properly but how do I parse it to show the city?

  $.ajax({ 
                url: '@Url.Action("GetDetails","home")',
                data: {'orderId':OId,},
                success: function (d,status,xhr) {
                   alert(d[0].City);
                },
                error: function (data) {
                    alert("Error");
                }
            });

The data returned is this:

[{"id":52,
"FName":"John",
"LName":"Smith",
"Street":"Main Street",
"City":"Magic Kingdom",
"State":"FL"}]

The alert in the ajax call returns an "undefined". I am doing basically the same thing with data returned from a Ajax post call and in that case the alert works as expected. What am I missing? How do I access the components of the JSON that is returned?

I am watching the data come back from the get successfully (using Fiddler). The returned data looks identical whether it is returned from a post or get.

Answer 1

Try this:

Here dataType: "json" tells jQuery that you want it to parse the returned JSON.

$.ajax({
    url: '@Url.Action("GetDetails","home")',
    data: {
        'orderId': OId,
    },
    dataType: "json",
    success: function (d, status, xhr) {
        alert(d[0].City);
    },
    error: function (data) {
        alert("Error");
    }
});

Answer 2

Try with parseJSON

var data= jQuery.parseJSON(d);
alert( data.City);