Load more json data onClick

Question

I have been trying to create a webpage that appends JSON data into a ul. The problem is that the JSON file has more than 600 values.

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.

<body onload="loadUser(20)">
  <ul id="placeholder"></ul>

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 < arg; i++) {
        var output = `<li class="list_item">${users[i].name</li>`;
        document.getElementById('placeholder').innerHTML += output;
      }
      document.getElementById('placeholder').innerHTML += '<button onclick="loadmore()">load more</button>';
    }
  }
  xhr.send();
}

// JSON Example:
[{
    "id": 1,
    "name": "Mithu Mondal",
    "email": "[email protected]"
  },

  {
    "id": 2,
    "name": "Frankenstien",
    "email": "[email protected]"
  }
]

Here's the link: https://www.mithuation.ml/jsonExample/

Thanks in Advance.

If you put 'vanilla javascript' in the title, why have you tagged the question with jQuery? — Rory McCrossan
– Rory McCrossan, Commented Jun 26, 2018 at 15:12
Note that the logic you have here won't solve any real loading/performance issues. You're still having to download the entire JSON file before you render any data in the request. If you want to implement paging I'd suggest you do it on the server side — Rory McCrossan
– Rory McCrossan, Commented Jun 26, 2018 at 15:15
As Jake mentioned in the answer, you cannot do it client-side. If you want pagination, you have to do it server-side. — Alex
– Alex, Commented Jun 26, 2018 at 15:18

Jake Chasan · Accepted Answer · 2018-06-26 15:13:51Z

1

When you perform an AJAX request (XMLHTTPRequest) it loads the entire file. There is no way to have the browser load a partial file.

If you do not plan to use a database (which would allow you to query a certain number of items at a time), I recommend that you split your data up into several JSON files. When you perform the XMLHTTPRequest, you will only retrieve a subset of the data. For the next request, you will retrieve the next file and thus get the next set of data.

answered Jun 26, 2018 at 15:13

Jake Chasan

6,5409 gold badges50 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3841707 · Accepted Answer · 2018-06-26 15:35:00Z

I guess this is what you are searching for Lazy.js. It will parse as much of the JSON as possible, asynchronously.

Import the libraries:

<script type="text/javascript" src="lazy.js"></script>

<!-- optional: if you want support for DOM event and AJAX-based sequences: -->
<script type="text/javascript" src="lazy.browser.js"></script>

If your want to retrieve 10 item at a time:

var response = JSON.parse(this.responseText);
var result = Lazy(response)
  .take(10);
document.getElementById('placeholder').innerHTML += output;

Collectives™ on Stack Overflow

Load more json data onClick

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related