cannot generate html from JSON data

Question

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?

@pvnarula - yes - and the strange thing is that the map is showing both objects, and the console.log for at the very start of the function also shows both of them, but only one goes into the html var — Mobaz
– Mobaz, Commented Jun 19, 2013 at 15:53

MrCode · Accepted Answer · 2013-06-19 15:53:03Z

2

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.

answered Jun 19, 2013 at 15:53

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ginja Ninja · Accepted Answer · 2013-06-19 15:52:36Z

0

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.

answered Jun 19, 2013 at 15:52

Ginja Ninja

4151 gold badge7 silver badges16 bronze badges

Collectives™ on Stack Overflow

cannot generate html from JSON data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related