Question

Hello I’m having some problem:
I some data coming from a JSON file, and I need to write it in a more efficient manner. Basically its working fine, but I will like to put the images in like a nested array or something.

So I just only have to do one image tag call, but the image tag will be bringing in a Set of Images. I don’t want to define image1-image1000 img tags,

I should be able to just put in the images like this:

“image”: { image1.jpg, image2.jpg, image3.jpg, image4.jpg}

and call it with one image tag like this

It that possible??? Some guidance will be helpful. Thanks

JSON DATA

{   "mygallery": [
            {"image1": " image1.jpg",
            "image2": " image2.jpg",
            "image3": " image 3.jpg",
            "image4": " image 4.jpg",
            “pagename”: “MyGallery”,
    }




JAVASCRIPT CALL

<script type="text/javascript">
$.getJSON('js/gallery.js, function(data){
         $("#main").html('');
         $(data.mygallery).each(function(index, mygallery){
             $("#main").append('<li class="thecontent"><img  src="/_img/' + mygallery.image1 + '"  /><img  src="/_img/' + mygallery.image2 + '"  /><img  src="/_img/' + mygallery.image3 + '"  /><img  src="/_img/' + mygallery.image4 + '"  /><span>' + mygallery.pagename + '</span></li>');
         });
     });



</script>



HTML DIV
<div id=”main”>




</div>

Answer 1

You can create something like this which still keep all the images and pagename inside mygallery object.

{   
   "mygallery": { images: [
                       "image1.jpg",
                       "image2.jpg",
                       "image3.jpg",
                       "image4.jpg",
                    ],
                   pagename: “MyGallery”
                 }
}

This is how you will use it

$.getJSON('js/gallery.js', function(data){ 
      $("#main").html('<li class="thecontent">'); 
      var images = data.images;
      for(var i =0;i<images.length;i++){
         $("#main").append('<img src="/_img/' + images[i] + '" />'); 
      }
      //$.each(images function(index, image){ 
      //   $("#main").append('<img src="/_img/' + image + '" />'); 
      //}); 

      $("#main").append('<span>' + data.pagename + ' </span></li> ');
  });