Loop through array while creating one div.row and appending three div.col-lg-4

Question

As a newbie to Javascript (or coding for that matter), I'm sure I overdid this, but I couldn't get anything else to work. Here's what I'm doing:

allData in createDiv has anywhere from 20-500 elements ["string", "string",...] (created elsewhere)
I need it to create a div.row (I'm using bootstrap) and send to DOM
Append three elements from allData to that created div.row in DOM
Then repeat that cycle for allData.length

I couldn't figure out any other way to add one row and append three elements from the array to it.

createRow: function(number) {
    var parentDiv = document.getElementById("displayQuoteHere");
    var createRow = document.createElement("div");
        createRow.className = "row row-border";
        createRow.id = number;

    parentDiv.appendChild(createRow);
},
createDiv: function() {
    debugger;
    var allData = this.finalDellEqArray(); // allData = [100 or so elements]
    var incr = 0; // use this to go through my if else statements
    var parentRow = ''; // blank until first iteration - will be assigned according to [i]
    for (var i = 0; i < allData.length; i++) {
        if (incr === 0) {
            this.createRow(i); // run my createRow function and assign it an id (i) to use later in appendChild
            parentRow = document.getElementById(i);
            var createDiv = document.createElement("div");
                createDiv.className = "col-lg-4 text-center";  // using bootstrap to create three columns
                createDiv.innerHTML = allData[i]; // assign innerHTML to each element in array
            parentRow.appendChild(createDiv);
            incr++; // increase this to goto next else-if without creating a row
        } else if (incr === 1) {
            var createDiv2 = document.createElement("div");
                createDiv2.className = "col-lg-4 text-center"; //dito
                createDiv2.innerHTML = allData[i];
            parentRow.appendChild(createDiv2);
            incr++; // increase this to goto next else-if without creating a row
        } else {
            var createDiv3 = document.createElement("div");
                  createDiv3.className = "col-lg-4 text-center";
                createDiv3.innerHTML = allData[i];
            parentRow.appendChild(createDiv3);
            incr = 0; // set incr back to zero so it will start again and create a row.
        }
    }
},

I don't want to use any libraries as I'm trying to learn Javascript. Suggestions or tips to make this better would be much appreciated!

woxxom · Accepted Answer · 2016-09-28 12:59:15Z

1

Currently your code accesses live DOM unnecessarily, which is slow. For example, it creates a row, then searches it by id in the document instead of returning directly. It's better to construct elements without attaching them to actual document, and attach when everything's done.

However, since you're using innerHTML there's no need to create DOM elements manually, just construct an overall HTML string and insert it in the document. The entire code boils down to:

createDiv: function() {
  document.getElementById("displayQuoteHere").insertAdjacentHTML('beforeend',
    this.finalDellEqArray().map(function(item, index) {
      var before = index % 3 > 0 ? '' : '<div class="row row-border" id="' + index + '">';
      var after = index % 3 < 2 ? '' : '</div>';
      return before + '<div class="col-lg-4 text-center">' + item + '</div>' + after;
    }).join('')
  );
},

answered Sep 28, 2016 at 12:59

woxxom

2,0021 gold badge10 silver badges12 bronze badges

\$\begingroup\$ .map! I had forgotten about this. I knew my search for id was a bad idea. Will implement and update, thank you for the info. \$\endgroup\$

Wayne Bunch
– Wayne Bunch

2016-09-28 15:38:36 +00:00
Commented Sep 28, 2016 at 15:38
\$\begingroup\$ also, I'd never heard of the .insertAdjacentHTML, very good read \$\endgroup\$

Wayne Bunch
– Wayne Bunch

2016-09-28 15:43:09 +00:00
Commented Sep 28, 2016 at 15:43

Add a comment |

Stack Exchange Network

Loop through array while creating one div.row and appending three div.col-lg-4

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Loop through array while creating one div.row and appending three div.col-lg-4

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions