Nodejs Пагинация вызова API с использованием смещения - PullRequest
Новая
       22

Nodejs Пагинация вызова API с использованием смещения

0 голосов
/ 21 апреля 2020

Я прошу прощения, если этот вопрос уже задокументирован, пожалуйста, укажите мне на эти ресурсы.

У меня есть nodejs приложение, делающее API-вызов к Untappd и для большинства опубликованных c API, я ограничено максимальным количеством элементов, возвращаемых в вызове, в этом случае 50 - это макс. Я хотел бы настроить разбиение на страницы, используя Offset (Пропуск), чтобы я мог перемещаться по 600+ элементам, а не только к 50.

Что работает У меня в настоящее время работает разбиение на страницы чтобы просмотреть первые 50 элементов через эти разные части ...

вызов API на сервере. js

const untappdAPI = { method: 'GET',
url: 'https://api.untappd.com/v4/user/beers/username',
  qs: 
   { access_token: 'abc123'
    ,limit:'50'
     }    
  };

app.get с нумерацией страниц на сервере. js

app.get('/untappd', function (req, res) {
  try {
    request(untappdAPI, function (error, response, body) {
        if (error) throw new Error(error);
        const untappdBeers = JSON.parse(body);
        const utBeerList = untappdBeers.response.beers.items.map(item => item );
//pagination
const perPage = 5;
let currentPage = 1;
const totalBeerList = utBeerList.length;
const pageCount = Math.ceil(totalBeerList / perPage);

if(req.query.page) {
  currentPage = parseInt(req.query.page, 10);
}
const start = (currentPage - 1) * perPage;
const end = currentPage * perPage;
        res.render('untappd.ejs', {
          utBeerList:utBeerList.slice(start, end),
          perPage: perPage,
          pageCount: pageCount,
          currentPage: currentPage,
        });
    });   
  } catch(e) {
    console.log("Something went wrong", e)
  }
  });

И затем элементы отображаются на странице untappd.e js, и рабочая нумерация страниц обеспечивается этим кодом

E JS Пагинация клиента на untappd.e js

<div id="pagination">
<% if (pageCount > 1) { %>
    <ul class="pagination">
        <% if (currentPage > 1) { %>
            <li><a href="?page=1">&laquo;</a></li>
        <% } %>
        <% var i = 1;
        if (currentPage > 5) {
            i = +currentPage - 4;
        } %>
        <% if (i !== 1) { %>
            <li><a href="#">...</a></li>
        <% } %>
        <% for (i; i<=pageCount; i++) { %>
            <% if (currentPage == i) { %>
                <li class="active"><span><%= i %> <span class="sr-only">(current)</span></span></li>
            <% } else { %>
                <li><a href="?page=<%= i %>"><%= i %></a></li>
            <% } %>

            <% if (i == (+currentPage + 4)) { %>
                <li><a href="#">...</a></li>
            <% break; } %>
        <% } %>
        <% if (currentPage != pageCount) { %>
            <li><a href="?page=<%= pageCount %>">&raquo;</a></li>
        <% } %>
    </ul>
<% } %>
</div>

Опять же, приведенный выше код работает хорошо, я получаю функционирующую нумерацию страниц с 5 элементами на странице и 10 страницами для разбить на страницы, но я ограничен этими 50 пунктами. Из того, что я читал о смещении, кажется, что смещение позволило бы мне циклически проходить весь набор из 600+ элементов, но я не могу найти документацию / справку, которая соответствует этому конкретному сценарию.

Как мне включить «смещение» в то, с чем я работаю, чтобы разбить на страницы весь список из 600+ предметов?

Большое спасибо за вашу помощь!

Красный

1 Ответ

0 голосов
/ 21 апреля 2020

Документация довольно проста (если вы не пытаетесь что-то еще ... но я предполагаю /v4/search/beer), все, что вам нужно сделать, это использовать offset и limit API предоставляет, что будет работать следующим образом: 

offset (int, optional) - The numeric offset that you what results to start
limit (int, optional) - The number of results to return, max of 50, default is 25

Это означает, что

  • , если вы хотите искать пиво от 0 до 50, установите: offset: 0, limit: 50
  • , если вы хотите искать пиво от 51 до 100, установите offset: 50, limit: 50
  • , если вы хотите искать пиво от 101 до 150, установите offset: 100, limit: 50

Я бы изменил ваш код следующим образом: 

const untappdAPI = (name, currentPage, perPage) => ({ method: 'GET',
  url: 'https://api.untappd.com/v4/search/beer',
  qs: { 
    q: name,
    access_token: 'abc123',
    limit: perPage, // 50
    offset: currentPage * perPage  // 0*50 = 0 | 1*50 = 50 | 2*50 = 100
  }    
})

, имея его в качестве функции, позволит вам просто передавать параметры, такие как 

app.get('/untappd', function(req, res) {

  const { search, currentPage, perPage } = req.query
  const url = untappdAPI(search, currentPage, perPage) // (currentPage - 1) if you start with 1

  try {
    request(url, (error, response, body) => {
      if (error) throw new Error(error)

      const apiRes = JSON.parse(body).response
      const beers = apiRes.beers.items
      const total = apiRes.found // outputs in the API, first item in the response

      res.render('untappd.ejs', {
        utBeerList: beers,
        perPage: perPage,
        pageCount: Math.ceil(total / perPage),
        currentPage: currentPage,
      })
    })
  } catch (err) {
    console.log("Something went wrong", err.message)
  }
});

Единственное, что остается сделать , это обновить HTML, как вы можете видеть из звонка, нам нужно 3 параметра (вы можете сделать некоторые c и не давать пользователю возможность изменять, например, элементы на странице, и всегда отображать 50 за раз ... 

<a href="?page=<%= pageCount %>&currentPage=<%= currentPage %>&perPage=50">&raquo;</a>

Примечание

в вашем коде, вы выводите const pageCount = Math.ceil(totalBeerList / perPage);, но ответ API g ives вам общее количество элементов, которые могут быть получены в первом элементе в ответе документации как переменная found

PS Я запросил доступ к API, чтобы проверить, все это работает, скоро обновлю ответ у меня есть идентификатор клиента и секрет

...