Home > DeveloperSection > Forums > cannot generate html from JSON data
Lady Bird Johnson
Lady Bird Johnson

Total Post:20

Points:140
Posted on    June-20-2013 3:35 AM

 JSON JSON 
Ratings:


 1 Reply(s)
 1218  View(s)
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.


AVADHESH PATEL

Total Post:604

Points:4228
Posted on    June-20-2013 7:55 AM

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.

Don't want to miss updates? Please click the below button!

Follow MindStick