Javascript 如何使用each（）函数迭代JSON文件

我想显示JSON文件中的元素

这是JSON文件

"2015": {
"img": "<img src = \"../images/images/images_of_members/image1.jpg\">",
"img2": "<img src = \"../images/images/images_of_members/image2.jpg\">"},

"2016": {
"img": "<img src = \"../images/images/images_of_members/image1.jpg\">",
"img2": "<img src = \"../images/images/images_of_members/image2.jpg\">"  }

这是HTML文件

<div class="years">
    <p data-year="2015">Pictures 1</p>
    <p data-year="2016">Pictures 2</p>
</div>
<div class="photo_target"></div>

图片1
图片2

如果我点击属性数据为2015年的段落，我只想显示对象2015的图片；如果我点击属性数据为2016年的段落，我想显示对象2016的图片。现在，它将遍历所有对象，并显示在这个JSON文件中可以找到的所有图片

我应该在AJAX调用中做些什么更改才能让它按我所希望的方式工作

谢谢

试试这个：

$.ajax("gallery.json", {
  dataType: 'json',
  success: function (response) {
    $(".photo_target").css('display', 'block');
    for(var year in response){
      for(var key2 in response[year]){
        var $img = $(response[year][key2]);
        $img.hide();
        $img.data("year", year);
        $(".photo_target").append($img);
      }
    }
  }
});

$(".years p").click(function(){
  var year = $(this).data("year");
  $(".photo_target").find("img").hide();
  $(".photo_target").find("img[data-year='" + year + "']").show();
  return false;
});

---

很长一段时间我做了一些JQuery，但您可以做类似的事情：

首先像这样更改json*：

{2015 : ['/images/img1', '/images/img2'], 2016 : ['/images/img2']}

然后你会：

function fetchData(year) {
   $.ajax("gallery.json", {
     success : function(response) {
        var images = response[year];
        //images is now an array you could 'for each' over
        images.forEach(function(image) {
          //do your append...
        })

     }
   })
}

---

（*假设您可以更改json。）

这里有一个可行的解决方案：

基本上，我将每年的所有图像分组在一个容器分区中：

for (var year in jsondata) {
  var $container = $("<div/>");
  $container
    .addClass("year-" + year)
    .appendTo($photo_target)
    .addClass("year-images");

  for (var img in jsondata[year]) {
    var $img = $(jsondata[year][img]);
    $container.append($img);
  }
}

最后，我添加了一个点击事件处理程序，它切换“.visible”类，使给定容器可见（同样使用CSS）

visible类的CSS：

.year-images.visible {
  display: block;
}

$（函数（）{

这是我的解决办法。 我换了这一行

success: function (response) {
    $.each(response, function () {
        $.each(this, function (i, el) {
            $(".photo_target").css('display', 'block');
            $(".photo_target").append(el);

对此

success: function (response) {
                    $.each(response[number], function (i, el) {
                        $(".photo_target").css('display', 'block');
                $(".photo_target").append(el);

现在很好用

---

感谢您的帮助。

您是否尝试过

控制台。记录
以查看您的
$是指什么。每个
循环所指的是什么？多少取决于您希望如何将所有这些图像加载到页面中。全部加载并过滤它们？…或者只加载用户想要的图像？如果有大量图像，则带宽可能会受到关注，例如，将不会图片太多，所有图片都将被优化。每个图片有三个不同的大小，用于不同的屏幕分辨率。我所做的和工作，但不幸的是加载了每个图片中的两个。下面是我得到的$。每个（响应，函数（）{$。每个（响应[number]，函数（I，el）{…}我添加了[number]在响应之后，现在只加载我想要的图片。但每个都加载两张图片。你知道为什么吗？这是如何解决单击过滤问题的？@charlietfl啊哈，我的错。我认为在OP的原始迭代中添加图片的问题不起作用。我将更新我的答案。@charlietfl我认为这可能会起作用。感谢info、 Hi I get error with this solution Uncaught ReferenceError:key1不可用defined@LászlóPéterVarga修好了！我想你和我一样错过了点击部分。看看我的答案。（不是那个投反对票的人）像你一样，我假设点击部分很明显，困难是在图像上进行迭代，但由于某种原因，它不起作用。我不知道为什么，控制台中根本没有错误消息。示例中的URL是虚构的，因此它们是不可见的…请看小提琴，我没有在这里复制所有内容。这是一个非常糟糕的解决方案它没有给那些试图帮助你的人任何荣誉。为什么你每次点击都加载相同的数据，为什么不按照这里其他人的建议去做呢？我相信你是一个比我好得多的程序员。我分享我的解决方案的唯一原因是它对我很好。其他人就是不行。我尝试了所有方法，结果是一个空白字段我的一个加载图片。每次点击都有一个AJAX调用，只需花费2kB的数据，几乎什么都没有。图片在我认为它们被缓存后在第一次点击时下载。谷歌开发工具显示，在第一次点击后根本没有图片下载。抱歉，如果我让你感到厌烦的话。
.year-images.visible {
  display: block;
}

$('.years p').on('click', function () {
    $(".photo_target").children().remove();
    var attr = $(this).attr('data-year');
    if (typeof attr !== typeof undefined && attr !== false) {
        var number = $(this).data('year');
        console.log(number);
        $.ajax("gallery.json", {
            dataType: 'json',
            success: function (response) {
                    $.each(response[number], function (i, el) {

                        $(".photo_target").css('display', 'block');

                $(".photo_target").append(el);
                    });

            }
        })

    }
})});

success: function (response) {
    $.each(response, function () {
        $.each(this, function (i, el) {
            $(".photo_target").css('display', 'block');
            $(".photo_target").append(el);

success: function (response) {
                    $.each(response[number], function (i, el) {
                        $(".photo_target").css('display', 'block');
                $(".photo_target").append(el);