How to limit the amount of data returned from a JSON file using fetch?

Question

I have this fetch statement that returns 19 building names, but I only want 10; the following is what I attempted, but I still get 19 building names.

fetchBuildings(energyProgramId) {
  fetch(`http://localhost:1001/api/energyprograms/${energyProgramId}/buildings/?results=10`)
    .then(res => res.json())
    .then(json => {
      this.setState({
        isLoaded: true,
        buildings: json,
      })
    });
}

Is there something extra I need to add?

Answer 1

Here is an example:

1.fetch('http://jsonplaceholder.typicode.com/posts/')

The above URL gives array of objects with 100 elements because it originally is an array of 100 elements.

2.fetch('http://jsonplaceholder.typicode.com/posts/?_limit=10') This URL gives array of objects with 10 elements.

Notice the difference?

I only did this : ?_limit=10 ----> Add any number in place of 10 and hopefully you will get desired results.

Answer 2

As the other answer already points out the best/most normal solution would be to change on the backend how the API returns data. Typically REST API's support query parameters such as limit and start or page and resultsPerPage.

If this is not available - e.g. when you're fetching an external resource - an alternative which is often supported by static file servers and sometimes by API's is the Range header which allows you to retrieve only a specific byte range of the resource (do note, in the case that an API supports this it will still load the entire resource on the server, but it will not transmit the entire resource). An example with fetch would look like

fetch('', { headers: { range: 'bytes=0-1000'} })

When doing this on XML or JSON resources it can be somewhat difficult to work with, but with for example CSV files it's ideal.

Answer 3

No different from fetch to XHR or axios or anything else. actually, no different from react or angular or vue or anything else.

This is an API that backend developers wrote it and it is based on REST API, so when you call it as GET or POST and anything else you just fetch the JSON that the backend developers designed it. BUT

There is a new technology that name is GraphQL. you can call API and then you just fetch the JSON what you want. Also, it must be implemented in backend but it is possible.

Answer 4

It's not closely bound up with React. If you need less data you must reduce data before set the state.

const reducedBuildings = [];

fetch(`http://localhost:1001/api/energyprograms/${energyProgramId}/buildings/?results=10`)
  .then(res => res.json())
  .then(json => {
    json.forEach(building => {
        if (reducedBuildings.length < 10) {
            reducedBuildings.push(building);
        }
    });
    this.setState({
      isLoaded: true,
      buildings: reducedBuildings,
    })
  });