2013-06-19 5 views
2

Я пытаюсь использовать данные JSON (возвращенные с PHP) для создания HTML для отображения на стороне клиента.не может генерировать html из данных JSON

У меня есть функция, которая также служит для заполнения карт Google.

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')); 
    } 

Эта карта Google заполнена отлично, а console.log ($ ('# thumblist')); показывает две записи, которые мне нужно показать, но только один из них добавлен в #thumblist (последний). Может ли кто-нибудь помочь?

+0

Вы установили данныеType: "json"? – pvnarula

+0

@pvnarula - да - и странно, что на карте показаны оба объекта, а console.log для самого начала функции также показывает оба из них, но только один идет в html var – Mobaz

ответ

2

Вы переписываете HTML-код #thumblist на каждой итерации. Вместо этого вы должны добавить:

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

.html() будет перезаписывать все содержимое элемента, в то время как .append() оставит текущее содержимое нетронутым и просто добавить к концу.

+0

только что получил это себя - спасибо MrCode !! – Mobaz

0

Вы используете $ ('# thumblist'). Html (html); присвоить html этому элементу? Если это так, вы пишете html в $ ('# thumblist') каждый раз, когда вы назначаете свой var html. Можете ли вы использовать append() или after() вместо этого? Таким образом, вы не замените html в списке файлов.

Смежные вопросы