Как ограничить объем данных, возвращаемых из файла JSON, используя fetch? - PullRequest
Новая
       11

Как ограничить объем данных, возвращаемых из файла JSON, используя fetch?

0 голосов
/ 16 октября 2018

У меня есть оператор fetch, который возвращает 19 названий зданий, но мне нужно только 10;Вот что я пытался сделать, но я все еще получаю 19 названий зданий. 

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

Есть ли что-то еще, что мне нужно добавить?

Ответы [ 3 ]

0 голосов
/ 16 октября 2018

Это не тесно связано с React.Если вам нужно меньше данных, вы должны уменьшить данные, прежде чем устанавливать состояние. 

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,
    })
  });
0 голосов
/ 20 апреля 2019

Как уже указывалось в другом ответе, лучшим / наиболее нормальным решением было бы изменить на бэкэнде, как API возвращает данные.Обычно параметры запроса поддержки API REST, такие как limit и start или page и resultsPerPage.

Если это недоступно - например, при извлечении внешнего ресурса - альтернатива, котораяЧасто поддерживается статическими файловыми серверами, а иногда API-интерфейсом, это заголовок Range, который позволяет получить только определенный диапазон байтов ресурса (обратите внимание, что в случае, если API поддерживает это, он все равно будет загружать весь ресурс всервер, но он не будет передавать весь ресурс).Пример с fetch будет выглядеть так: 

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

При выполнении этого на ресурсах XML или JSON может быть несколько сложно работать, но, например, с файлами CSV это идеально.

0 голосов
/ 16 октября 2018

Не отличается от fetch до XHR или axios или чего-либо еще.на самом деле, ничем не отличается от react или angular или vue или чего-либо еще.

Это API, который разработчики бэкэнда написали, и он основан на REST API, поэтому, когда вы вызываете егокак GET или POST и все остальное, вы просто выбираете JSON, который разработчики бэкенда разработали. НО

Существует новая технология с именем GraphQL.Вы можете вызвать API, а затем просто получить JSON, что вы хотите.Кроме того, это должно быть реализовано в бэкэнде, но это возможно.

...