小JS循环问题

Question

I have a script that calls data from a database. For every result a new div is output. However when the button that calls the function search() is clicked, I only get one result. I guess the question is: how do I create a new div for every result, not just set it to the first row found?

function search()   {
    var xhr2 = new XMLHttpRequest();
    xhr2.addEventListener ("load", view);
    var reg = document.getElementById("type").value;
    xhr2.open("GET", "getresults.php?type=" + reg);
    xhr2.send();
}
function view(e, resulthtml)    {
    var array = JSON.parse(e.target.responseText);
    for (var count=0; count<array.length; count++)
    {
    var id = array[count].id;
    var username = array[count].username;
    var srcpath = array[count].srcpath;
    var title = array[count].title;
    var type = array[count].type;
    var postcode = array[count]. postcode;
    var description = array[count]. description;
    var price = array[count].price;
    var phone = array[count].phone;
    var lat = array[count].lat;
    var lon = array[count].lon;

    resulthtml =          "<div class='col-md-4'>"
                + "<div class='thumbnail'>"
                + "<img id='a' class='a' alt='300x200' src='" + srcpath + "'>"
                + "<div class='caption'>"
                + "<h3>"
                + description
                + "</h3>"
                + "<p>"
                + "£" + price + ""
                + "</p>"
                + "<p>"
                + "Contact number:"
                + "</p>"
                + "<p>"
                + "<input type='submit' value='Contact seller' onclick='search()'/>"
                + "</p>"
                + "</div>"
                + "</div>"
                + "</div>"

    }
    document.getElementById("row").innerHTML = resulthtml;
}   


</script>

Answer 1

You're overwriting resulthtml on every iteration of the loop. Initialize it as an empty string outside the loop and then add to it.

edit: You're also doing quite a lot of work in the loop that could be hoisted outside of it, mainly all that string concatenation. This would be easier on the browser:

var item, id, username, srcpath, title, type, postcode, description, price, phone, lat, lon,
  resulthtml = '',
  pre = "<div class='col-md-4'><div class='thumbnail'><img id='a' class='a' alt='300x200' src='",
  inner1 = "'><div class='caption'><h3>",
  inner2 = "</h3><p>£",
  post = "</p><p>Contact number:</p><p><input type='submit' value='Contact seller' onclick='search()'/></p></div></div></div>";

for (var count=0; count<array.length; count++)
    {
    item = array[count];
    id = item.id;
    username = item.username;
    srcpath = item.srcpath;
    title = item.title;
    type = item.type;
    postcode = item. postcode;
    description = item. description;
    price = item.price;
    phone = item.phone;
    lat = item.lat;
    lon = item.lon;

    resulthtml += pre + srcpath + inner1 + description + inner2 + price + post;

    }