如何使用 each(） 函数循环访问 JSON 文件

How to use the each() function to iterate through a JSON file

本文关键字：循环 访问 JSON 文件 函数 何使用 each      更新时间：2023-09-26

我想显示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 调用中更改什么才能使其按我想要的方式工作？

谢谢

很长一段时间我做了一些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。

这是一个可行的解决方案： 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;
}

试试这个：

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

$(函数 (( {

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

它现在工作正常。

谢谢你的帮助。

相关文章：