title: Load more json data onClick
body: <p>I have been trying to create a webpage that appends JSON data into a <code>ul</code>. The problem is that the JSON file has more than 600 values. </p>
  
  <p>I would like to limit the number of values retrieved, say 10 and then add a 'load more' button to append more, eg. 10 more, to it and so on. Here's my code.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body onload="loadUser(20)"&gt;
    &lt;ul id="placeholder"&gt;&lt;/ul&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>function loadUser(arg) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'people.json', true);
    xhr.onload = function() {
      if (this.status == 200) {
        var users = JSON.parse(this.responseText);
        for (var i = 0; i &lt; arg; i++) {
          var output = `&lt;li class="list_item"&gt;${users[i].name&lt;/li&gt;`;
          document.getElementById('placeholder').innerHTML += output;
        }
        document.getElementById('placeholder').innerHTML += '&lt;button onclick="loadmore()"&gt;load more&lt;/button&gt;';
      }
    }
    xhr.send();
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// JSON Example:
  [{
      "id": 1,
      "name": "Mithu Mondal",
      "email": "mithu@bla.com"
    },
  
    {
      "id": 2,
      "name": "Frankenstien",
      "email": "frank@gmail.com"
    }
  ]
  </code></pre>
  
  <p>Here's the link: <a href="https://www.mithuation.ml/jsonExample/" rel="nofollow noreferrer">https://www.mithuation.ml/jsonExample/</a></p>
  
  <p>Thanks in Advance.</p>