Я не могу написать в DIV все объекты в объекте

Question

У меня есть список div с всплывающим окном.Каждый div получит атрибут data-target от объекта.Я могу вернуть все предметы в объекте, но получить только последний.

<div class="portfolio-item" data-toggle="modal"></div>
<div class="portfolio-item" data-toggle="modal"></div>

const portolioItemInfos = [
    { dataTarget: "tempero-restaurante" }, 
    { dataTarget: "aksam-gunesi" }
]

const div = document.querySelectorAll(".portfolio-item");
for (let key of div) {
    for (let item of portolioItemInfos) {
        key.setAttribute("data-target", item.dataTarget);
    }
}

Answer 1

Для каждого div вы перебираете все свои portolioItemInfos, поэтому каждый div принимает последнее значение цикла.

Вы можете упростить его и не нужно перебирать portolioItemInfos, просто используйте индекс цикла for, чтобы назначить право dataTarget.

const portolioItemInfos = [
  {
    dataTarget: 'tempero-restaurante'
  },
  {
    dataTarget: 'aksam-gunesi'
  }
];

const div = document.querySelectorAll('.portfolio-item');
for (let i = 0; i < div.length; i++) {
   div[i].setAttribute('data-target', portolioItemInfos[i].dataTarget);
}

<div class="portfolio-item" data-toggle="modal"></div>
<div class="portfolio-item" data-toggle="modal"></div>

Answer 2

Вы можете использовать forEach подход вместо традиционного for цикла, например:

const portolioItemInfos = [
	{ dataTarget: "tempero-restaurante" }, 
	{ dataTarget: "aksam-gunesi" }
]

const div = document.querySelectorAll(".portfolio-item");

portolioItemInfos.forEach(function(item, index){
	div[index].setAttribute("data-target", portolioItemInfos[index].dataTarget);
})

<div class="portfolio-item" data-toggle="modal"></div>
<div class="portfolio-item" data-toggle="modal"></div>

Вы также можете перебрать массив объектов элемента DOM:

div.forEach(function(item, index){
    div[index].setAttribute("data-target", portolioItemInfos[index].dataTarget);
})

Answer 3

Ваша проблема в том, что вы перезаписываете атрибут data-target в каждом цикле.Вместо этого вам нужно добавить в конец атрибута data-target, получив текущее значение и добавив новое значение в конец его.Вы можете сделать это следующим образом:

let prev = key.getAttribute('data-target');
prev = prev ? prev : '';
key.setAttribute("data-target", (prev +' ' +item.dataTarget).trim());

См. Пример ниже (проверьте элемент, чтобы увидеть результат):

const portolioItemInfos = [{
    dataTarget: "tempero-restaurante"
  },
  {
    dataTarget: "aksam-gunesi"
  }
]

const divs = document.querySelectorAll(".portfolio-item");
for (let key of divs) {
  for (let item of portolioItemInfos) {
    let prev = key.getAttribute('data-target');
    prev = prev ? prev : ''; // if prev is isn't null, set prev equal to prev. If prev is null, then set prev to the empty string
    
    key.setAttribute("data-target", (prev +' ' +item.dataTarget).trim());
  }
}

<div class="portfolio-item" data-toggle="modal"></div>
<div class="portfolio-item" data-toggle="modal"></div>