Small JS loop issue

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>

first of all, are you certain that the response has more than one result? — display name
– display name, Commented May 9, 2015 at 13:49
Yes, there's multiple test data which is shown in the preview in the console — Tom Reeves
– Tom Reeves, Commented May 9, 2015 at 13:51

skolsuper · Accepted Answer · 2015-05-09 14:01:11Z

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;

    }

Gabriel Tomitsuka · Accepted Answer · 2015-05-09 13:55:49Z

1

You can't do

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

Because that overwrites the old innerHTML of the #row. Instead, you can do:

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

That adds resulthtml to the innerHTML string returned, or use the method:

document.getElementById("row").appendChild(resulthtml);

That does the exactly same thing. It's really a matter of personal choice which one you'll use.

answered May 9, 2015 at 13:55

Gabriel Tomitsuka

1,15110 silver badges24 bronze badges

Comments

Tom Reeves · Accepted Answer · 2015-05-09 13:55:18Z

Cheers. Thought it was something small!

<script type="text/javascript">

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)    {

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 = 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>

Collectives™ on Stack Overflow

Small JS loop issue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related