getting json data loop

H开发者_开发知识库ello 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>

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

I may be misunderstanding the question, but you can define an array in JSON with square brackets, so for example:

{
"myArray":["foo","bar","baz"]
}

Use a nested each loop (assuming the structure stays consistent with what you're showing:

$.each(data.mygallery,function(index,mygallery){
  var $li = $('<li />'{ class: 'thecontent' }).appendTo('#main');
  $.each(mygallery,function(name,image){
    $('<img />',{ src: '/_img/'+image }).appendTo($li);
  });
});

Otherwise, you are probably better off making the images an array instead of an object. So instead of:

"images": { "imgae1" : "image1.jpg", "image2": "image2.jpg" }

it looks like:

"images": ["image1.jpg", "image2.jpg", "image3.jpg"];

(unless there is a reason for the key value)