Ajax成功JSON循环

Question

I have a JS function that uses ajax to filter options in a sub navigation/filter menu.

It makes the calls correctly and receives the JSON response from the server, however it won't loop through the results.

It is only displaying the last result in the JSON response.

The ajax script:

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

A typical response from the server

[
{"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"}
]

Could anyone shed some light on why it isn't looping?

Answer 1

Try this

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