响应中解析的 JSON 属性未定义，但响应未定义答案

【问题标题】：Parsed JSON attributes from response are undefined but the response is not响应中解析的 JSON 属性未定义，但响应未定义
【发布时间】：2020-07-01 22:02:52
【问题描述】：

我在处理 xhr 异步请求的 json 响应时遇到问题。

这是我的代码：

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));
}

可以看到console.log打印响应成功，打印：

{"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}

但是，当我通过调用 f.ex 访问响应属性时。 console.log(JSON.parse(xhr.responseText).metric_id); javascript 返回我未定义，这是为什么呢？我正在等待 readyState 等于 4，并且仅在状态码等于 200 时才执行该代码。

打印整个响应工作，但是当我打印特定属性时它没有，我不明白为什么。

【问题讨论】：

标签： javascript json xmlhttprequest

【解决方案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));
}

由于某种原因，这可行。

【讨论】：