cannot generate html from JSON data

Total Post:19

Points:133

JSON 
 2121  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. 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

Please check, If you want to make this post sponsored

You are not a Sponsored Member. Click Here to Subscribe the Membership.