获取json数据循环

getting json data loop

本文关键字：循环 数据 json 获取      更新时间：2023-09-26

你好，我有一些问题:我有一些数据来自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>

你可以创建这样的东西，仍然保持所有的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中使用方括号定义数组，例如:

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

使用嵌套的each循环(假设结构与所显示的保持一致):

$.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"];

相关文章：