Dynamics CRM: JavaScript GET request is not retrieving records using Web.Api

Question

I have written following JS function on Incident form to retrieve Contract Lines, but function is not doing anything. I have verified the Fetch Query and it returns results. So data is definitely there. I have debugged it and looks like "this.readyState == 4" is false.

Can anyone please suggest me what is wrong with my code. Do I need to add any assemblies?

Thanks

function Test() {

    var customerId = Xrm.Page.getAttribute("parentcustomer").getValue();
    if (customerId == null) {
        return;
    }

    var fetchXml = "<fetch version='1.0' output-format='xml-platform' mapping='logical' distinct='true'>" +
        "<entity name='contractdetail'>" +
        "<attribute name='contractid' />" +
        "<attribute name='contractdetailid' />" +
        "<filter type='and'>" +
        "<condition attribute='statuscode' operator='in'>" +
        "<value>2</value>" +
        "<value>1</value>" +
        "</condition>" +
        "<condition attribute='customerid' operator='eq' value='" +
        customerId[0].id +
        "' />" +
        "</filter>" +           
        "</entity>" +
        "</fetch>";

    var uri = "/contractdetail?fetchXml=" + encodeURIComponent(fetchXml);
    var clientUrl = Xrm.Page.context.getClientUrl();
    var webAPIPath = "/api/data/v8.1";   
    uri = clientUrl + webAPIPath + uri;

    var request = new XMLHttpRequest();
    request.open("GET", encodeURI(uri), false);
    request.setRequestHeader("Accept", "application/json");
    request.setRequestHeader("Content-Type", "application/json; charset=utf-8");
    request.setRequestHeader("OData-MaxVersion", "4.0");
    request.setRequestHeader("OData-Version", "4.0");
    request.onreadystatechange = function() {
        if (this.readyState == 4 /* complete */) {
            request.onreadystatechange = null;

            switch (this.status) {
                case 200: // Success with content returned in response body.
                case 204: // Success with no content returned in response body.
                    var data = JSON.parse(this.response);
                    if (data && data.value) {
                    for (var indexContractLine = 0; indexContractLine < data.value.length; indexContractLine++) {
                        alert(data.value[indexContractLine].contractdetailid);
                        //alert(data.value[indexContractLine]['@odata.etag']);
                    }
                }
                    break;
                default: // All other statuses are unexpected so are treated like errors.
                    var error;
                    try {
                        error = JSON.parse(request.response).error;
                    } catch (e) {
                        error = new Error("Unexpected Error");
                    }
                    alert(error);
                    break;
            }

            if (this.status == 200) {
                var data = JSON.parse(this.response);
                if (data && data.value) {
                    for (var indexContractLine = 0; indexContractLine < data.value.length; indexContractLine++) {
                        alert(data.value[indexContractLine].contractdetailid);
                        alert(data.value[indexContractLine]['@odata.etag']);
                    }
                } else {
                    var error = JSON.parse(this.response).error;
                    alert(error.message);
                }
            }
        };
        request.send();
    }
}   

Answer 1

Inside onreadystatechange replace this with request

Here's a sample bit of code straight out of a production environment (note: this is a POC, it's not meant to be copy-pasted in your code) to show how it should end up looking like:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
    if (xhttp.readyState == 4) {
        if (xhttp.status == 200) {
            xhttp.onreadystatechange = null; // avoid memory leaks
            var data = JSON.parse(xhttp.response);
            onsuccess(data);
        }
        else {
            var error = JSON.parse(xhttp.response).error;
            onerror(error);
        }
    }
};