asp.net webapi works in browser and postman, but Jquery Ajax can't parse the returned JSON object

Viewed 34

Fiddled with every imaginable combination of webapi controller and jquery ajax script which, when debugging, does make a get call to the controller, but it won't parse the data (in debug, the data is there!). PostMan and typing URL into browser works perfectly, so I believe there is (yet another) trick to get jquery.ajax to work.

the WebAPI controller method (which works):

namespace SearchWebsite.Controllers
    {
        public class MoreInfoController : ApiController
        {
            private string DBConnStr;
            public MoreInfoController()
            {
                DBConnStr = ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString;
                LiveItem_Data.DBConnStr = DBConnStr;
            }
    
            [Route("api/getmoreinfo/{lid}")]
            [HttpGet]
            public async Task<IHttpActionResult> GetMoreInfo(string lid)
            {
                var retval = new AppCore.MoreInfo();
    
                if (lid.Length == 36)
                {
                    if (IsGUID(lid))
                    {
                        retval = await LiveItem_Data.GetMoreInfoAsync(lid);
                    }
                }
                return Ok(retval);
            }
    
        }
    }

And I get the expected results when I call it via postman or the browser, like so:

https://localhost:44371/api/getmoreinfo/2A116FF3-E6C8-4EE3-88E5-99001DCCE36A

The jquery ajax method:

$(".popInfo").bind("click", function (e) {
    var ListID = $(this).parent().parent().find('[id*=hidlid]').val();
    $.ajax({
        type: "get",
        url: "../../api/GetMoreInfo/" + ListID,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            try { 
                var mi = jQuery.parseJSON(data);
                var img = "";

                if (mi.IMGLNK != "") { img = "<img src='" + mi.IMGLNK + "' class='img-responsive' />"; }
                var title = "<a href='redir?lid=" + ListID + "' target='_blank' >" + mi.NAME + "</a>";
                var btnV = "<a href='redir?lid=" + ListID + "' target='_blank' class='btn btn-success' ><span class='glyphicon glyphicon-shopping-cart'></span>&nbsp;Visit Website</a>";
                var btnR = '<a href="javascript:ReportProblem(\'' + ListID + '\');" class="btn btn-warning" ><span class="glyphicon glyphicon-alert"></span>&nbsp;Report Problem</a>';
                var details = "<p><p>SKU: " + mi.SKU + "</p><p>MPN: " + mi.MPN + "</p><p>UPC: " + mi.UPC + "</p><p>Ship Weight: " + mi.WT + " lbs</p><p>Last Updated: " + formatJSONDate(mi.MD) + "</p></p>"
                $('#moreinfo').find('.modal-title').html(title);
                $('#moreinfo').find('.modal-body').html(img + '<p class="descr">' + mi.DESC + '</p>' + details);
                $('#moreinfo').find('#btnVisit').html(btnV);
                $('#moreinfo').find('#btnReport').html(btnR);
                $('#moreinfo').off().modal('show');
            } catch (e) {
                alert("ERROR:" + e + " data: " + data +  "   mi: " + mi);                   
            }
        },
        error: function (err) {
            alert("error: " + err);
        }
    });
});

the try catch and alerts are for troubleshooting, however even though the data is in the data variable while stepping through and debugging, the "data" becomes undefined immediately after using parseJSON(), and, naturally, the variable "mi" is undefined as well and the error I trapped is "SyntaxError: Unexpected token u in JSON at position 0 data: [object Object]".

I'm at a loss as how to remedy this issue. (note: I am in the process of converting old ASMX services into MVC5 WebAPI 2.1 services, so DotNetCore answers won't work as it's a completely different beast, as is MVC4 and below)

0 Answers
Related