Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to create rows for every 3rd item using for each?

I am trying to create a grid using forEach. What i am after is to be able to wrap items into rows of 3. How would i do that?

Here’s my current code:

        this.el = document.getElementById('feed')

        const releases = data.Releases //array of items
        const list = document.createDocumentFragment()

        releases.forEach((release, index) => {
          let item = document.createElement('div')

          let a = document.createElement('a')
          let title = document.createElement('h2')
          let date = document.createElement('time')

          title.innerHTML = `${release.Title}`
          date.innerHTML = `${release.PublishDate}`
          a.setAttribute('href', release.EncryptedId)
          
          a.appendChild(date)
          a.appendChild(title)
          item.appendChild(a)
          list.appendChild(item)
        })

        this.el.appendChild(list)

Expected output:

<div id="feed">
  <div>
    <div><a href="">1<h2></h2><time></time></a></div>
    <div><a href="">2<h2></h2><time></time></a></div>
    <div><a href="">3<h2></h2><time></time></a></div>
  </div>
  <div>
    <div><a href="">4<h2></h2><time></time></a></div>
    <div><a href="">5<h2></h2><time></time></a></div>
    <div><a href="">6<h2></h2><time></time></a></div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    a new row is created every time the index is divisible by 3. This row is then appended to the list. The items are appended to the last row in the list. The ‘row’ variable keeps track of the current row.

    releases.forEach((release, index) => {
  if (index % 3 === 0) {
    row = document.createElement('div');
    row.className = 'row';
    list.appendChild(row);
  }
    Login or Signup to reply.
  2. 0

    Change the structure of your data based on how you need it to be. In this case you’ll want something that resembles the following structure:

    [
  [1, 2, 3]
  [4, 5, 6],
  [7, 8, 9],
  [...],
  ...
]

    So you’ll have to divide your array in to chunks of 3. You can write a function for this which does just that. Here’s one for example:

    const toChunks = (array, size) => 
  Array(Math.ceil(array.length / size)).fill()
  .map((entry, index) => index * size)
  .map(begin => array.slice(begin, begin + size));

    Apply that to your data and loop over the nested array. In the outer loop, create a div which. Then in the inner loop, create the rest of the elements and append them to the div. Then append the div to the list.

    const list = document.createDocumentFragment();

const releases = data.Releases; //array of items
const releasesChunks = toChunks(releases, 3);

for (const releasesChunk of releasesChunks) {
  const wrapper = document.createElement('div');

  for (const release of releasesChunk) {
    const item = document.createElement('div');

    const a = document.createElement('a');
    const title = document.createElement('h2');
    const date = document.createElement('time');

    a.href = release.EncryptedId;
    title.textContent = release.Title;
    date.textContent = release.PublishDate;
          
    a.append(date, title);
    item.append(a);
    wrapper.append(item);
  }

  list.append(wrapper);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search