Ajax call to web handler works but returns no data

Question

So, I have an ASP.NET Generic handler defined with the following code snippet:

        public void ProcessRequest ( HttpContext ctx ) {
            try {
                ctx.Response.ContentType = "text/json";
                var jsonData = new StreamReader(ctx.Request.InputStream).ReadToEnd();
                SearchRequest req = JsonConvert.DeserializeObject<SearchRequest> ( jsonData );
                if ( jsonData == null || req == null ) {
                    ctx.Response.Write ( string.Empty );
                    return;
                }
                else {
                    var records = CustomerInvoiceDB.GetAll($"Invoice_ID = {req.SearchValue}");
                    var settings=new JsonSerializerSettings{DateFormatString ="mm/dd/yyyy"};
                    settings.NullValueHandling = NullValueHandling.Include;
                    var response = JsonConvert.SerializeObject(records, settings);
                    ctx.Response.Write ( response );
                }
            }
            catch {
                ctx.Response.Write ( null );
            }
        }

The data returned looks like this:

"[{\"Invoice_ID\":47390,\"Customer_ID\":15546,\"Invoice_Date\":\"00/01/2022\",\"Invoice_Total\":1892.5200,\"Customer_Order_ID\":12445,\"Due_Date\":\"00/01/2022\",\"Paid_Date\":null,\"Paid_Total\":0.0000,\"Is_Terms_Invoice\":false,\"Payment_Reference_No\":null,\"Notes\":null}]"

This web handler is called with the following $.ajax code:

$.ajax({
                url: 'invoicedetailsearch.ashx',
                data: json,
                method: 'post',
                dataType: 'json',
                success: function (data) {
                    $('#mdlInvoiceNo').val(data.Invoice_ID);
                    $('#mdlInvoiceDate').val(data.Invoice_Date);
                    if (info.Is_Terms_Invoice == true) {
                        $('#mdlTerms').val('Yes');
                    }
                    else {
                        $('#mdlTerms').val('No');
                    }
                    $("#mdlInvoice").modal('show');
                },
                error: function (request, status, error) {
                    console.log(error);
                }
            });

Now, the weird thing is, the ajax call works, because it hits the success function, but the data returns undefined.

I don't understand what's going on here. The web handler is returning JSON data, but the ajax call see the data returned as undefined. Any thoughts here?

Answer 1

your handler is sending back an array of objects (indicated by the entire result set surrounded by the square brackets []). Yet, your ajax code is referring to the response data as if it is only a single object (which would be the curly brackets {} around the resulting fields). If you only ever expect one result from the hander's return array (or you only ever want to deal with the first result returned in the array), then you can modify your client side jQuery ajax to look like this (refer to the first json object in the array aka data[0] with 0 being the first element index of the array). also info is not an object, it is yet another field in the result record, so we change that to data[0].Is_Terms_Invoice

$.ajax({
                url: 'invoicedetailsearch.ashx',
                data: json,
                method: 'post',
                dataType: 'json',
                success: function (data) {
                    $('#mdlInvoiceNo').val(data[0].Invoice_ID);
                    $('#mdlInvoiceDate').val(data[0].Invoice_Date);
                    if (data[0].Is_Terms_Invoice == true) {
                        $('#mdlTerms').val('Yes');
                    }
                    else {
                        $('#mdlTerms').val('No');
                    }
                    $("#mdlInvoice").modal('show');
                },
                error: function (request, status, error) {
                    console.log(error);
                }
            });

alternatively, let a local variable object equal to the first element in the array and then refer to that object variable

$.ajax({
                url: 'invoicedetailsearch.ashx',
                data: json,
                method: 'post',
                dataType: 'json',
                success: function (data) {
                    let info = data[0];
                    $('#mdlInvoiceNo').val(info.Invoice_ID);
                    $('#mdlInvoiceDate').val(info.Invoice_Date);
                    if (info.Is_Terms_Invoice == true) {
                        $('#mdlTerms').val('Yes');
                    }
                    else {
                        $('#mdlTerms').val('No');
                    }
                    $("#mdlInvoice").modal('show');
                },
                error: function (request, status, error) {
                    console.log(error);
                }
            });