CODEWITHSUNDEEP
javascriptjqueryjson
Mobaz
Mobaz

Reputation: 595

cannot generate html from JSON data

I'm trying to use JSON data (returned from PHP) to create HTML for display to the client side.

I've got this in a function that is also serving to populate google maps. 

function searchLocationsNear(center) {

 //some AJAX that's working fine//

success:function(data, response){
console.log(data);
var markerNodes = data;

  var bounds = new google.maps.LatLngBounds();

for (var i = 0; i < markerNodes.length; i++) {
var uid = markerNodes[i].id;
    var name = markerNodes[i].name;
    var address = markerNodes[i].address;
    var distance = parseFloat(markerNodes[i].distance);
    var avatar = markerNodes[i].avatar;
    var bio = markerNodes[i].bio;
    var rate = markerNodes[i].price;
    var latlng = new google.maps.LatLng(
        parseFloat(markerNodes[i].lat),
        parseFloat(markerNodes[i].lng));

    createOption(name, distance, i);
   createMarker(latlng, name, avatar, uid, bio, rate);
       bounds.extend(latlng);

     var html = "<div style='float:left; padding-right:10px;'><img src='user/"+uid+"/"+avatar+"'s alt='Tutor - "+name+" Profile Picture'></div><div class='infowindow'><h3>" + name + "</h3><hr><h4>Rate: "+rate+"</h4>"+bio+"</div>"; 
console.log(html);

            $('#thumblist').html(html);
console.log($('#thumblist'));
  }

This Google Map is populating fine, and the console.log($('#thumblist')); shows the two entries that I need to show, but only one of them is appended to #thumblist (the last one). Can anyone help?

Upvotes: 2

Views: 93

Answers (2)

MrCode
MrCode

Reputation: 64526

You're overwriting the #thumblist HTML on each iteration. Instead you should append:

 $('#thumblist').append(html);

.html() will overwrite the entire content of the element, whereas .append() will leave the current content intact and just add to the end.

Upvotes: 2

Ginja Ninja
Ginja Ninja

Reputation: 415

Are you using $('#thumblist').html(html); to assign the html to that element? If so, you are writing over the html in $('#thumblist') each time you assign your var html to it. Can you use append() or after() instead? That way you won't replace the html in thumblist.

Upvotes: 0

Related Questions