I am importing JSON data and posting each JSON object to the page so that it is in its own div. There are four columns of JSON objects. This is fine until item #24 (where items begin with i = 0). Then the page looks like this: link to what my page looks like
This is also the case for #30, 36, 42 & 48. The items stop at 50.
Here is my code:
function displayProducts (productArray) {
var allProducts = document.getElementById('firstPage');
while (allProducts.hasChildNodes()) {
allProducts.removeChild(allProducts.firstChild);
};
allProducts.setAttribute('class', 'row');
for (var i = 0; i < 50; i++) {
var newCol = document.createElement('div');
newCol.setAttribute("name", "newCol");
newCol.setAttribute('class', 'col-md-3');
var productImg = document.createElement('img');
var albumTitle = document.createElement('figcaption');
var songNumber = document.createElement('p');
productImg.setAttribute('src', productArray[i].thumbnailUrl);
albumTitle.innerText = "Album Title: " + productArray[i].title;
songNumber.innerText = "Track Number: " + productArray[i].id;
newCol.appendChild(productImg);
newCol.appendChild(albumTitle);
newCol.appendChild(songNumber);
allProducts.appendChild(newCol);
}; };
How do I write the code so that there are no gaps between my objects? Thank you.
