CANNOT GENERATE HTML FROM JSON DATA

Lady Bird Johnson

Total Post:20

Points:140
Posted by  Lady Bird Johnson
JSON 
 1525  View(s)
Ratings:
Rate this:
Hi Everyone,

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

Any help on above is really appreciated.
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: cannot generate html from JSON data

    Hi,


    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.

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!