I can't write to DIV all items in object

Question

I have a div list with pop-up. Each div will get data-target attribute from an object. I can return all items in object, but get only last item.

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

[Javascript equivalent of Python's zip function - Stack Overflow](https://stackoverflow.com/questions/4856717/javascript-equivalent-of-pythons-zip-function) — user202729, Jan 31 '19 at 11:16
`key.setAttribute` replace the value in the given attribute, not append — Thum Choon Tat, Jan 31 '19 at 11:21

Nick Parsons · Answer 1 · 2019-01-31T11:34:35.330

Your problem is that you are overwriting the data-target attribute each loop. Instead you need to append to the end of the data-target attribute by getting the current value and adding the new value to the end of it. You can do this like so:

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

See example below (inspect element to see result):

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>

score 0 · Answer 2 · answered Jan 31 '19 at 11:24

For each div you loop over all your portolioItemInfos so each div take the last value of the loop.

You can actually simplify it and don't need to loop over the portolioItemInfos, just use the index of a for loop to assign the right 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>

score 0 · Answer 3 · answered Jan 31 '19 at 11:44

You can use forEach approach instead traditional for loop, like following:

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>

You can also iterate over DOM element object array as well:

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

I can't write to DIV all items in object

3 Answers3