updating images in a ul list via jquery ajax

Question

I have the following jquery code:

jQuery(function(){
  jQuery("select#rooms").change(function(){
    var options = '';
    jQuery.getJSON("/admin/selection.php",{id: jQuery(this).val(), 
    ajax: 'true'}, 
    function(j){
      for (var i = 0; i < j.length; i++) {
        //what should go here?
      }
    })
  })
})

from the server I will be getting back a JSON object that has bunch of values separated by commas like:

[{images: 'cfil132,cfil542,cfil341'}]

In my html, when page initially loads (before call to serverside), I am displaying some images like so:

<ul>
   <li>
       <a> <img height="72" width="72" alt="" src="thumb_image1.jpg"/></a>
   </li>
   <li>
      <a><img height="72" width="72" alt="" src="thumb_image2.jpg"/></a>
   </li>
</ul

I want to know whether it is possible to update the images on my html page with the json object I get back. So for this example, after I trigger the request to the server I will have the following html code instead of the above.

<ul>
   <li>
       <a> <img height="72" width="72" alt="" src="cfil132.jpg"/></a>
   </li>
   <li>
      <a><img height="72" width="72" alt="" src="cfil542.jpg"/></a>
   </li>
   <li>
      <a><img height="72" width="72" alt="" src="cfil341.jpg"/></a>
   </li>
</ul>

I have no idea how to do this.

Note: values coming in the json object are dynamic, in this case they are 3 but could be 4 5 or more...

Answer 1

Assuming the data returned by the service is an array of a single object like:

[{images: 'cfil132,cfil542,cfil341'}]

Then do this:

jQuery(function(){
  jQuery("select#rooms").change(function(){
    jQuery.getJSON("/admin/selection.php",{id: jQuery(this).val(), 
    ajax: 'true'}, 
    function(data){
       var $ul = $('ul#images').empty();  // the ul where images end up....
       var images = data[0].images.split(',');
       $.each( images , function(idx, img ) {
         $ul.append('<li><a><img src="' + img + '.jpg" height="72" width="72" alt=""/></a></li>');
    })
  });
});