Is there a way to limit the amount of data that I get from a response?

Question

Hello I've got a small challenge to do where I have to display some data that I get from an api. The main page will display the first 20 results and clicking on a button will add 20 more results from the page.

The api call that I was given returns an array with around 1500 elements and the api doesn't have a parameter to limit the amount of elements in the array so my question is if I can limit it somehow with axios or should I just fetch all of these elements and display them?

This is the api: https://api.chucknorris.io/

Answer 1

there are two answers for your question

the short answer is :

On your side, there's nothing you can do until pagination is implemented on API side

the second answer is :

you can handle it using http module like this

 http.request(opts, function(response) {
    var request = this;
    console.log("Content-length: ", response.headers['content-length']);
    var str = '';
    response.on('data', function (chunk) {
      str += chunk;
      if (str.length > 10000)
      {
        request.abort();
      }
    });
    response.on('end', function() {
      console.log('done', str.length);
      ...
    });
  }).end();

This will abort the request at around 10.000 bytes, since the data arrives in chunks of various sizes.

Answer 2

Since the API has no parameter to limit the amount of results you are responsible for modifying the response.

Since you're using Axios you could do this with a response interceptor so that the response is modified before reaching your application.

You may want to consider where the best place to do this is though. If you allow the full response to come back to your application and then store it somewhere, it may be easier to return the next page of 20 results at the user's request rather than repeatedly calling the API.