CODEWITHSUNDEEP
javascript
Aniket
Aniket

Reputation: 13

looping over div using javascript

I'm trying to loop over divs and insert div items dynamically but its just inserting only one div item into the html page. this is my code : 

     function loadArticles ()      {        
     var request = new XMLHttpRequest();   
     request.onreadystatechange = function (){   
         if (request.readyState === XMLHttpRequest.DONE){   
          var articles = document.getElementById('articles');  
            if (request.status === 200) {  
              var articleData = JSON.parse(this.responseText);  
                for (var i=0; i< articleData.length; i++) {  
         var content = `<div class="container">
          <div class="row">
       <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
             <div class="post-preview">
                  <a href="/${articleData[i].title}">
                      <h2 class="post-title">
                       ${articleData[i].heading}</h2>
                       <h3 class="post-subtitle">
                       ${articleData[i].subtitle}</h3>
                      </a>
       <p class="post-meta">Posted by <a href="#">${articleData[i].author}</a> on Date ${articleData.date[i].toDateString()}</p>
       </div>
        </div>
        </div>
        </div>`;
            }
            articles.innerHTML = content;
        } else {
            articles.innerHTML('Oops! Could not load all articles!')
        }
    }
};

Upvotes: 1

Views: 70

Answers (3)

prasanth
prasanth

Reputation: 22510

TRy like this:

        }
            articles.innerHTML += content;
        } else {
            articles.innerHTML ='Oops! Could not load all articles!';
        }

First thing you are over write the existing data .so use +.It will append the data

And second is a syntax error innerHTML= instead of innerHTML()

   function loadArticles ()      {        
     var request = new XMLHttpRequest();   
     request.onreadystatechange = function (){   
         if (request.readyState === XMLHttpRequest.DONE){   
          var articles = document.getElementById('articles');  
            if (request.status === 200) {  
              var articleData = JSON.parse(this.responseText);  
                for (var i=0; i< articleData.length; i++) {  
         var content = `<div class="container">
          <div class="row">
       <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
             <div class="post-preview">
                  <a href="/${articleData[i].title}">
                      <h2 class="post-title">
                       ${articleData[i].heading}</h2>
                       <h3 class="post-subtitle">
                       ${articleData[i].subtitle}</h3>
                      </a>
       <p class="post-meta">Posted by <a href="#">${articleData[i].author}</a> on Date ${articleData.date[i].toDateString()}</p>
       </div>
        </div>
        </div>
        </div>`;
            }
            articles.innerHTML += content;
        } else {
            articles.innerHTML ='Oops! Could not load all articles!';
        }
    }
};

Upvotes: 0

Phiroze Noble
Phiroze Noble

Reputation: 303

You are overwriting the content every loop step by declaring content inside the loop. You should declare content outside of the loop then assign it post loop.

var content = '';

for (var i=0; i< articleData.length; i++) {  
  content += `<div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="post-preview">
          <a href="/${articleData[i].title}">
            <h2 class="post-title">
              ${articleData[i].heading}</h2>
            <h3 class="post-subtitle">
              ${articleData[i].subtitle}</h3>
          </a>
          <p class="post-meta">
            Posted by <a href="#">${articleData[i].author}</a> 
            on Date ${articleData.date[i].toDateString()}
          </p>
        </div>
      </div>
    </div>
  </div>`;
}

articles.innerHtml = content;

Upvotes: 0

Jonas Wilms
Jonas Wilms

Reputation: 138557

InnerHtml is a string. So your code will override the content i times. You need to add to the string:

articles.innerHTML+=content;

And this line needs to be inside of the for loop...

Upvotes: 1

Related Questions