Question

我使用下面的代码调用显示所有产品的php页面，然后解析它们并在字符串上显示它们。上周工作正常显示所有结果，但现在它似乎已经破碎，只显示数据库的最后结果，经过几天和痛苦的一小时盯着我的屏幕，我开始疯了，可以做一些帮助。

function display(results) {
    article = document.getElementById("homeArticle");
    item = '';
    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;
}


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

window.addEventListener("load", getItems);

如果有人可以提供任何有助于大力感谢你的指示！

Answer 1

你需要两个变量。一个用于构建html字符串，另一个用于保存结果数组中的每个项目。

将您的代码更改为：

function display(results) {
    article = document.getElementById("homeArticle");
    var html = '';
    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
        html += '<section id="homePageSection"> <p>Name:' + name + '</p><p>Description:' + description + '</p><p>Price:' + price + '</p></section>';
    };
    article.innerHTML = html;
}

这样你就会附加html字符串，而不是覆盖之前的字符串。

还要考虑确保每个html元素都有唯一的id，你可以通过将i附加到id来实现这一点。

html += '<section id="homePageSection-'+i+'"> <p>Name:' + name + '</p><p>Description:' + description + '</p><p>Price:' + price + '</p></section>';

Answer 2

Concat item字符串，不要使用重复的ID，而是使用类：

item += '<section class="homePageSection"> <p>Name:' + name + '</p><p>Description:' + description + '</p><p>Price:' + price + '</p></section>';

你正在做的是在每次迭代时覆盖item，这就是为什么你只得到最后一次。

更新

忘了提供我写的最后一句话的代码。要避免覆盖它，要么使用不同的变量（如在另一个答案中），要么直接分配值而不创建不必要的变量，如下所示：

for (var i = 0; i < results.length; i++){ 
    item += '<section class="homePageSection"> <p>Name:' + 
            results[i].P_NAME + 
            '</p><p>Description:' + 
            results[i].P_DESCRIPTION + 
            '</p><p>Price:' + 
            results[i].P_PRICE + 
            '</p></section>';
}

为什么只有最后一项显示而不是全部

2 个答案: