如何使用 each() 函数遍历 JSON 文件

Question

我想显示 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\">"  }

这是 JavaScript 文件

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

这是 HTML 文件

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

如果单击属性数据年 2015 的段落，我只想显示对象 2015 中的图片，如果单击属性数据年 2016 年的段落，则显示对象 2016 中的图片。现在它是迭代通过所有对象并显示所有图片，可以在此 JSON 文件中找到。

我应该在 AJAX 调用中进行哪些更改才能使其按我的意愿工作？

谢谢

Answer 1

我做了很长时间的 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。）

Answer 2

这是一个可行的解决方案：https://jsfiddle.net/hgmx71zt/2/

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

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

我使用 CSS 将它们默认隐藏。

.year-images {
  display: none;
}

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

$(".years").on("click", "[data-year]", function(e) {
  var year = $(e.currentTarget).data("year"),
    container = $photo_target.find(".year-" + year);
  console.log(year);
  console.dir(container);
  container.toggleClass("visible").siblings().removeClass("visible");
});

可见类的 CSS：

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

Answer 3

试试这个：

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

Answer 4

$(函数 () {

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

现在可以正常使用了。

感谢您的所有帮助。