javascript - 结果没有显示在屏幕上，但没有控制台错误

我正在使用以下代码对返回所需信息的数据库运行查询。我现在想在屏幕上显示它。

function display(parsed) {
article = document.getElementById("homeArticle");
item = '<p>Something should go here</p>';
for (var i = 0; i < parsed.length; i++) {
    var item = parsed[i];

    var name = item.P_NAME;
    var description = item.P_DESCRIPTION;
    var price = item.P_PRICE;
        // next I add to the string that we want to place on the page
    item += '<section id="homePageSection"> <p>Name:' + name + '</p><p>Description:' + description + '</p><p>Price:' + price + '</p></section>';
};
article.innerHTML = item;
}


function getItems() {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        console.log(this.response)
        var parsed = JSON.parse(this.responseText);
        display(parsed.rows);
    };
    xhr.open("GET", "displayData.php");
    xhr.send();
}

window.addEventListener("load", getItems);

但是，这不会在屏幕上显示结果。我使用console.log查看是否是getItems函数无法正常工作，但这会记录我想要的信息，因此我获取的是正确的信息，我只需要它在屏幕上显示即可，但我不知道为什么它不起作用？

以下是控制台中记录的内容。

{"rows":[{"P_ID":"1","P_NAME":"Iphone 6","P_DESCRIPTION":"the latest iphone","P_PRICE":"300"},{"P_ID":"2","P_NAME":"Ipad Mini","P_DESCRIPTION":"the latest and smallest ipad","P_PRICE":"199.99"},{"P_ID":"3","P_NAME":"MacBook Pro","P_DESCRIPTION":"the macbook pro","P_PRICE":"999"},{"P_ID":"4","P_NAME":"Ipad Cover","P_DESCRIPTION":"a cover for ipad","P_PRICE":"30"},{"P_ID":"8","P_NAME":"Iphone 5c","P_DESCRIPTION":"the iphone 5c","P_PRICE":"150"},{"P_ID":"9","P_NAME":"Windows 8 laptop","P_DESCRIPTION":"a laptop with windows 8","P_PRICE":"250"}]}

最佳答案

看起来您正在将原始响应文本传递给函数，而不是传递给已解析的对象。

应该是这样的：

xhr.onload = function() {
    console.log(this.response)
    var parsed = JSON.parse(this.responseText);
    display(parsed);   // <-----
};

display函数中还有几个问题：

                  // v----- this said parsed instead of results
function display(results) {
    article = document.getElementById("homeArticle");
    item = '<p>Something should go here</p>';
    for (var i = 0; i < results.length; i++) {
        var item = results[i];

        var name = item.P_NAME;
        var description = item.P_DESCRIPTION;
        var price = item.P_PRICE;
            // next I add to the string that we want to place on the page
        item += '<section id="homePageSection"> <p>Name:' + name + '</p><p>Description:' + description + '</p><p>Price:' + price + '</p></section>';
    }
    article.innerHTML = item;  // needs to be innerHTML
}

编辑：数组位于名为rows的属性上，因此将其传递到display()时需要访问此属性：

display(parsed.rows);

或在您的display()函数中访问它：

function display(response) {
    var results = response.rows;
    ...
}