Ajax success JSON loop

Question

У меня есть функция JS, которая использует ajax для фильтрации опций в меню суб-навигации/фильтра.

Он правильно выполняет звонки и получает ответ JSON от сервера, однако он не будет проверять результаты.

Он отображает только последний результат в ответе JSON.

Аякса сценарий:

function updateVenues(opts){ 
    $.ajax({ 
     type: "POST", 
     url: "/venue-search/ajax/", 
     dataType : 'json', 
     cache: false, 
     data: {filterOpts: opts, get_param: 'id'}, 
     success: function(records){ 
     $.each(records, function(idx, record){ 
     $("#searchResults").html('<a href="/venue-preview/' + record.id + '" class="various fancybox.ajax">' + record.title + "</a>"); 
     }); 
     } 
    }); 
    } 

Типичный ответ от сервера

[ 
{"id":"1","title":"Wedding Venue 1","main_image":"wedding-venue-1.jpg"}, 
{"id":"2","title":"Wedding Venue 2","main_image":"wedding-venue-2.jpg"}, 
{"id":"3","title":"Wedding Venue 3","main_image":"wedding-venue-3.jpg"} 
] 

Может кто-нибудь пролить некоторый свет на то, почему это не зацикливание?

Answer 1

Каждый раз, когда вы называете .html это перезаписывать все содержимое с новым значением, поэтому вы получите только последний отображаемый. Вы должны использовать append:

function updateVenues(opts){ 
    $.ajax({ 
     type: "POST", 
     url: "/venue-search/ajax/", 
     dataType : 'json', 
     cache: false, 
     data: {filterOpts: opts, get_param: 'id'}, 
     success: function(records){ 
     //clear out any previous results first 
     $("#searchResults").empty(); 
     $.each(records, function(idx, record){ 
     //now append each one 
     $("#searchResults").append('<a href="/venue-preview/' + record.id + '" class="various fancybox.ajax">' + record.title + "</a>"); 
     }); 
     } 
    }); 
    } 

Answer 2

Попробуйте

function updateVenues(opts){ 
$.ajax({ 
    type: "POST", 
    url: "/venue-search/ajax/", 
    dataType : 'json', 
    cache: false, 
    data: {filterOpts: opts, get_param: 'id'}, 
    success: function(records){ 
    $.each(records, function(idx, record){ 
    $("#searchResults").append('<a href="/venue-preview/' + record.id + '" class="various fancybox.ajax">' + record.title + "</a>"); 
    }); 
    } 
}); 
    } 

Answer 3

Вы должны использовать:

$("#searchResults").append('<a href="/venue-preview/' + record.id + '" class="various fancybox.ajax">' + record.title + "</a>"); 

В противном случае вы перезаписать "#searchResults") в каждом цикле.