title: Loop over an Array of Objects and display only object property at a time in HTML using Javascript
body: <p>I have an array of objects. Within the objects are 2 properties: &quot;quote&quot; and &quot;author&quot;. I have a container div in which I want the quotes to display one at a time on an interval of every 2 seconds. Right now it is displaying one letter at a time rather than one (quote + author) at a time. How do I get it to display one (quote + author) at a time?</p>
  <pre><code>&quot;use strict&quot;;
  
  /*Read JSON quotes file*/
  let mainContainer = document.querySelector('.quotes');
  
  
  let quotesList = [
      {
          &quot;quote&quot;: &quot;Whether you think you can or you think you can’t, you’re right.&quot;,
          &quot;author&quot;: &quot;—Mother Teresa&quot;,
      },
      {
          &quot;quote&quot;: &quot;Act as if what you do makes a difference. It does.&quot;,
          &quot;author&quot;: &quot;—William James&quot;,
      },
      {
          &quot;quote&quot;: &quot;What you get by achieving your goals is not as important as what you become by achieving your goals.&quot;,
          &quot;author&quot;: &quot;—Zig Ziglar&quot;,
      },
  ];
  
  var counter = 0;
  let allQuotes;
  
  quotesList.map(quote =&gt; {
      allQuotes = `${quote.quote} ${quote.author}`;
  })
  
  function next_quote() {
      mainContainer.innerHTML =  allQuotes[counter %  allQuotes.length];
      counter += 1;
  }
  
  setInterval(next_quote, 2000);
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;quotes&quot;&gt;Place quote here&lt;/div&gt;
  </code></pre>