Ajax success JSON loop

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?

You aren't adding to #searchResults you are overwriting the contents of it every time you go through the loop. Try using .append() instead. — sWW
– sWW, Commented Aug 28, 2014 at 11:02

James Thorpe · Accepted Answer · 2014-08-28 11:15:41Z

1

Each time you call .html it's overwriting the entire contents with the new value, which is why you only get the last one displayed. You need to use 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>");
       });
      }
    });
  }

edited Aug 28, 2014 at 11:15

answered Aug 28, 2014 at 11:03

James Thorpe

32.3k6 gold badges76 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Telford Computer-DoctorLtd Over a year ago

You Sir, are a genius! Your answer is near enough identical to that of Shail, however you also include the "clearance" of the previous results. Worked perfectly. I shall mark it as the answer as soon as I can (9 minutes!). Thanks again!

sWW Over a year ago

I prefer $("#searchResults").empty(); over $("#searchResults").html('');

Shail · Accepted Answer · 2014-08-28 11:03:33Z

0

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

answered Aug 28, 2014 at 11:03

Shail

8734 silver badges16 bronze badges

Comments

derdida · Accepted Answer · 2014-08-28 11:03:37Z

0

You should use:

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

Otherwise you overwrite your "#searchResults") in each loop.

answered Aug 28, 2014 at 11:03

derdida

14.9k17 gold badges94 silver badges146 bronze badges

Collectives™ on Stack Overflow

Ajax success JSON loop

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related