Question

您好我遇到了一些问题：我有些数据来自JSON文件，我需要以更有效的方式编写它。基本上它的工作正常，但我想把图像放在嵌套数组或其他东西。

所以我只需要进行一次图像标记调用，但图像标记会引入一组图像。我不想定义image1-image1000 img标签，

我应该能够像这样输入图像：

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

并使用一个像这样的图像标记来调用它

这可能???一些指导将有所帮助。感谢

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

我可能误解了这个问题，但您可以使用方括号在JSON中定义数组，例如：

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

Answer 2

使用嵌套的每个循环（假设结构与您显示的结构保持一致：

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

否则，您可能最好将图像设为数组而不是对象。所以而不是：

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

看起来像：

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

（除非有关键值的原因）

Answer 3

您可以创建类似的内容，但仍然将images和pagename保留在mygallery对象中。

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

这就是你将如何使用它

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

得到json数据循环

3 个答案: