Parsed JSON attributes from response are undefined but the response is not

Question

I am having issues processing the json response of an xhr async request.

Here's my code:

function fillEditForm() {
    var req = { 'referenceid' : window.last_clicked_parent };
    var xhr = new XMLHttpRequest();
    xhr.open("POST", '/get_metric', true);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.onload = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            console.log(response);
            document.forms['editmetricsForm']['editParent'].value = response.parent;
            document.forms['editmetricsForm']['editinputMetricName'].value = response.metric_name;
            document.forms['editmetricsForm']['editMetricDesc'].value = response.metric_desc;
            document.forms['editmetricsForm']['editMetricFormula'].value = response.metric_formula;
            document.forms['editmetricsForm']['editinputURL'].value = response.url;
            document.forms['editmetricsForm']['editsubCategory'].value = response.htmlclass;
            document.forms['editmetricsForm']['editChildrenLevel'].value = response.childrenlevel;
        }
    }

    xhr.send(JSON.stringify(req));
}

I can see that the console.log prints the response successfully, printing:

{"metric_id": 3, "metric_name": "AAAA", "metric_desc": "BBBB", "metric_formula": "CCCC", "parent": "aaaa", "reference_id": "aaaa", "url": null, "collapse": null, "htmlclass": null, "childrenlevel": null}

However when I access the response attributes by calling f.ex. console.log(JSON.parse(xhr.responseText).metric_id); the javascript returns me undefined, why is that? I am waiting for the readyState to be equal to 4 and I am also executing that code only when the statuscode is equal to 200 .

Printing the whole response work but when I print specific attributes it doesn't and I cannot understand why.

Answer 1

function fillEditForm() {
    var req = { 'referenceid' : window.last_clicked_parent };
    var xhr = new XMLHttpRequest();
    xhr.open("POST", '/get_metric', true);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.onload = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            document.forms['editmetricsForm']['editParent'].value = JSON.parse(response).parent;
            document.forms['editmetricsForm']['editinputMetricName'].value = JSON.parse(response).metric_name;
            document.forms['editmetricsForm']['editMetricDesc'].value = JSON.parse(response).metric_desc;
            document.forms['editmetricsForm']['editMetricFormula'].value = JSON.parse(response).metric_formula;
            document.forms['editmetricsForm']['editinputURL'].value = JSON.parse(response).url;
            document.forms['editmetricsForm']['editsubCategory'].value = JSON.parse(response).htmlclass;
            document.forms['editmetricsForm']['editChildrenLevel'].value = JSON.parse(response).childrenlevel;
        }
    }
    xhr.send(JSON.stringify(req));
}

For some reason this works.