Отображать изображения в файле JSON с помощью JQuery

Question

У меня есть файл JSON, который включает в себя 8 изображений, каждое из которых я хотел бы отобразить с помощью класса. Я попытался загрузить первое изображение в первый класс, но оно не работает.

jQuery, который я пробовал:

  jQuery(function($) {
   $.getJSON('example.json', function (response) {
    $('.tile-image1').each(function(i) {
     $(this).append('<div><img src= "' + response.Tiles[i].img[i].img1 + '"> 
     </div>');
     });
    });
   });

HTML:

  <div class="tile-image1"></div>
  <div class="tile-image2"></div>
  <div class="tile-image3"></div>
  <div class="tile-image4"></div>

JSON:

 {
"Tiles" : [
  {
    "title" : "",
    "year" : "-",
    "category" : "",
    "img": {
    "img1" : "example.jpg",
    "img2" : "example.jpg",
    "img3" : "example.jpg",
    "img4" : "example.jpg"
    }
  },
  {
    "title" : "",
    "year" : " -",
    "category" : "",
    "img" : {
    "img1" : "example.jpg",
    "img2" : "example.jpg",
    "img3" : "example.jpg",
    "img4" : "example.jpg"
    }
   }
  ]
 }

Итак, я пытаюсь добиться того, чтобы все «img1» в файле JSON отображались с классом tile-image1, все «img2» - на плитке класса-image2 и т. д. Я новичок в этом, и любая помощь будет оценена.

Answer 1

Я создаю фрагмент кода, может вдохновить вас сделать все остальное:

var jsonData= {
"Tiles" : [
  {
    "title" : "",
    "year" : "-",
    "category" : "",
    "img": {
    "img1" : "example.jpg",    "img2" : "example.jpg",
    "img3" : "example.jpg",    "img4" : "example.jpg"
    }
  },  {
    "title" : "",
    "year" : " -",
    "category" : "",
    "img" : {
    "img1" : "example.jpg",    "img2" : "example.jpg",
    "img3" : "example.jpg",    "img4" : "example.jpg"
    }
   }
  ]
 };
 
 
   //jQuery(function($) {
 jsonData.Tiles.map(list=>{
     //console.log(list)
     Object.values(list.img).map((imgLink,i)=>{
     let index = i+1;
     $('.tile-image'+i).append('<div><img src="'+imgLink+'"></div>');

  })

 })

div{
  width:25%;
  display:flex;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tile-image1"></div>
  <div class="tile-image2"></div>
  <div class="tile-image3"></div>
  <div class="tile-image4"></div>

Answer 2

Для достижения этой цели вам нужно перебрать массивы в самом объекте, а не элементы в DOM. Таким образом, вы можете заполнить целевые div контейнеры соответствующими img элементами.

Вам понадобятся два цикла, один для прохождения Tiles, а другой для прохождения свойств img объект внутри каждой плитки. Обратите внимание, что я изменил классы на div, чтобы немного высушить это.

$.getJSON('example.json', function (response) {
  response.Tiles.forEach(function(tile) {
    Object.keys(tile.img).forEach(function(imgKey) {
      $('.' + imgKey).append('<div><img src="' + tile.img[imgKey] + '">  </div>');
    });
  });
});

var response = {
  "Tiles": [{
    "title": "",
    "year": "-",
    "category": "",
    "img": {
      "img1": "example_1_1.jpg",
      "img2": "example_1_2.jpg",
      "img3": "example_1_3.jpg",
      "img4": "example_1_4.jpg"
    }
  }, {
    "title": "",
    "year": " -",
    "category": "",
    "img": {
      "img1": "example_2_1.jpg",
      "img2": "example_2_2.jpg",
      "img3": "example_2_3.jpg",
      "img4": "example_2_4.jpg"
    }
  }]
}

jQuery(function($) {
  // inside AJAX callback...
  response.Tiles.forEach(function(tile) {
    Object.keys(tile.img).forEach(function(imgKey) {
      $('.' + imgKey).append('<div><img src="' + tile.img[imgKey] + '">  </div>');
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tile-image img1"></div>
<div class="tile-image img2"></div>
<div class="tile-image img3"></div>
<div class="tile-image img4"></div>