Jquery добавить массив значений объекта в правый div

Question

У меня есть массив объектов, подобных этому

var TLPics = [{
   id: 2141,
   Picture: "/postimg/20181102_134013.jpg",
   userpostid: 4891
}, {
   id: 2142,
   Picture: "/postimg/20181102_134053.jpg",
   userpostid: 4891
}, {
   id: 2143,
   Picture: "/postimg/20181102_133944.jpg",
   userpostid: 4892
}]

А затем у меня есть несколько div'ов с атрибутом data-id данных, подобным этому

<div id="TLF" class="c2">
   <div id="ttimgs" class="mygalleryx lidf2" data-id="4891"> </div>
</div>
<div id="TLF" class="c2">
   <div id="ttimgs" class="mygalleryx lidf2" data-id="4892"> </div>
</div>

Теперь то, что я пытаюсьдостижение состоит в том, чтобы отфильтровать массив и полученный массив получить источник данных изображения из изображения: применить к изображению, а затем добавить изображение к правому элементу div с идентичным userpostid относительно атрибута div data-id attr.например, userpostid = 4891 и добавление к погружению с data-id = 4891.

До сих пор я пробовал приведенный ниже код, но у меня есть проблемы с созданием изображений в div, которые не имеют идентичного идентификатора data-id

function checkpics(e) {
   var x = parseInt(e);
   var appendTLpic = TLPics.filter(element => element.userpostid === x);
   $(".lidf2").each(function() {
      var thisid = $(this).data('id')
      $(TLPics).each(function() {
         if (thisid == this.userpostid) {
            $('[data-id="' + thisid + '"]').append('<a><img  class="userpictz lazyload imgz xp"  alt="" data-views="" data-likes="" src="' + this.Picture + '" style=" display:inline-block"/></a>');
         }
      });
   });
   appendTLpic = [];
}

Answer 1

После долгих проб и ошибок это код, который я придумал, и он достиг желаемых результатов из моего вопроса.это может быть не самый чистый код

    var TLPics = [{
  id: 2141,
  Picture: "/postimg/20181102_134013.jpg",
  userpostid: 4891
}, {
  id: 2142,
  Picture: "/postimg/20181102_134053.jpg",
  userpostid: 4891
}, {
  id: 2143,
  Picture: "/postimg/20181102_133944.jpg",
  userpostid: 4892
}]
    
    var x;
    var appendTLpic = [];
    $(".mygalleryx").each(function () {
  
    x = $(this).data('id')

    appendTLpic = TLPics.filter(element => element.userpostid === x);

    $(appendTLpic).each(function () {
        var src = this.Picture

        $(`.lidf2[data-id=${x}]`).append(`<img class="userpictz lazyload imgz xp" alt="" data-views="" data-likes="" src="${src}" />`);
   
    });
 
    });

.userpictz { 
  display: inline-block; 
  
  /* just for this demo... */
  border: 1px solid #C00;
  width: 30px;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="TLF c2">
  <div class="ttimgs mygalleryx lidf2" data-id="4891"></div>
</div>
<div class="TLF c2">
  <div class="ttimgs mygalleryx lidf2" data-id="4892"></div>
</div>

При работе с веб-формами asp.net я бы просто решил это с помощью вложенного повторителя, где я получаю свои изображения из источника данныхконтролируется значением hiddenfeild главного повторителя.Теперь, потому что мое новое приложение требует, чтобы я использовал Ajax, но это осложнение.

Поэтому я создаю для каждого цикла для моего div с классом .mygalleryx, а затем извлекаю каждый div-идентификатор данных.теперь я фильтрую свой массив TLPics, используя переменную data-id x.Затем я вкладываю для каждой функции свой новый отфильтрованный массив, из которого извлекаю картинку.Теперь в моем новом фильтрованном массиве каждой функции я добавляю свое изображение в соответствующий div-идентификатор, используя мою начальную переменную x, и все готово.Я все еще учусь, я хочу исправиться.Но этот ответ решил мою проблему.

Answer 2

Первая проблема, с которой вы столкнулись, заключается в том, что вы дублируете оба атрибута #TLF и #ttimgs id, когда они должны быть уникальными.Измените их на классы.

Затем вы можете перебрать каждый элемент .ttimgs и find() связанный объект в массиве, сопоставив атрибут data-id со свойством userpostid перед добавлением нового img.Попробуйте это:

var TLPics = [{
  id: 2141,
  Picture: "/postimg/20181102_134013.jpg",
  userpostid: 4891
}, {
  id: 2142,
  Picture: "/postimg/20181102_134053.jpg",
  userpostid: 4891
}, {
  id: 2143,
  Picture: "/postimg/20181102_133944.jpg",
  userpostid: 4892
}]

$('.ttimgs').each(function() {
  var src = TLPics.find(x => x.userpostid === $(this).data('id')).Picture;
  $(this).append(`<img class="userpictz lazyload imgz xp" alt="" data-views="" data-likes="" src="${src}" />`);
});

.userpictz { 
  display: inline-block; 
  
  /* just for this demo... */
  border: 1px solid #C00;
  width: 30px;
  height: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="TLF c2">
  <div class="ttimgs mygalleryx lidf2" data-id="4891"></div>
</div>
<div class="TLF c2">
  <div class="ttimgs mygalleryx lidf2" data-id="4892"></div>
</div>