Как использовать полученные данные от fetch без повторного обращения?

Question

Написал следующий код, который получает данные и при кликах срезает с массива по 10 элементов:

let url = 'https://dummyjson.com/products?limit=100';//откуда берём JSON данные
let rows_on_page=10;//количество строк на страницу
window.onload = function() {
    pag();    
};
async function pag(number_current_page=1)
{            
    fetch(url,{
        method:'GET',
        headers: {
            'Content-Type': 'text/html;charset=utf-8'
        },
        })
    .then((response) => response.json())
    .then((data) => {
        let offset=number_current_page*rows_on_page; 
        let current_list=offset-rows_on_page;
        all_count_rows=Object.values(data)[0].length;//общее количество строк запроса
    for (var key in data.products.slice(current_list,offset)) {
        index=Number(key)+current_list;
        i=index+1;                         
        console.log(data.products[index]['title']);        
    }
    })
}

<!DOCTYPE html>

<html>
    <head>
        <title>pag</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    </head>
    <body>
        <nav class="pagination justify-content-center">
            <ul class="pagination">
                <li class="page-item  disabled" onclick="pag(1)">
                    <a class="page-link" href="#"> |&lt; </a>
                </li>
                <li class="page-item  disabled" onclick="pag(1)">
                    <a class="page-link" href="#">Назад</a>
                </li>
                <li class="page-item active " onclick="pag(this.textContent)">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item  " onclick="pag(this.textContent)">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item  " onclick="pag(this.textContent)">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item  " onclick="pag(this.textContent)">
                    <a class="page-link" href="#">4</a>
                </li>
                <li class="page-item  " onclick="pag(this.textContent)">
                    <a class="page-link" href="#">5</a>
                </li>
                <li class="page-item  " onclick="pag(2)">
                    <a class="page-link" href="#">Далее</a>
                </li>
                <li class="page-item  " onclick="pag(10)">
                    <a class="page-link" href="#"> &gt;| </a>
                </li>
            </ul>
        </nav>
        <script src="ft.js"></script>    
    </body>
</html>

Но при каждом клике идёт обращение по url и считывание данных. Как получить 1 раз данные и использовать их постоянно нарезая по 10 элементов для вывода?

Answer 1

Пример того, как можно реализовать запрос данных один раз в апи, а далее оперировать полученными данными

let url = 'https://dummyjson.com/products?limit=100'; //откуда берём JSON данные
let rows_on_page = 10; //количество строк на страницу
let productList = [];
window.onload = function() {
  getProducts();
};
async function getProducts(number_current_page = 1) {
  fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'text/html;charset=utf-8'
      },
    })
    .then((response) => response.json())
    .then((data) => {
      console.log('Получен ответ');
      productList = data.products;
      pag(1);
    })
}

function pag(page) {
  const container = document.getElementById('productList');
  container.innerText = '';
  for (let i = (page - 1) * 10; i < rows_on_page * page; i++) {
    const product = document.createElement('div');
    product.innerText = productList[i].title;
    container.append(product);
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="pagination justify-content-center">
  <ul class="pagination">
    <li class="page-item  disabled" onclick="pag(1)">
      <a class="page-link" href="#"> |&lt; </a>
    </li>
    <li class="page-item  disabled" onclick="pag(1)">
      <a class="page-link" href="#">Назад</a>
    </li>
    <li class="page-item active " onclick="pag(this.textContent)">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item  " onclick="pag(this.textContent)">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item  " onclick="pag(this.textContent)">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item  " onclick="pag(this.textContent)">
      <a class="page-link" href="#">4</a>
    </li>
    <li class="page-item  " onclick="pag(this.textContent)">
      <a class="page-link" href="#">5</a>
    </li>
    <li class="page-item  " onclick="pag(2)">
      <a class="page-link" href="#">Далее</a>
    </li>
    <li class="page-item  " onclick="pag(10)">
      <a class="page-link" href="#"> &gt;| </a>
    </li>
  </ul>
</nav>
<div id="productList">
  Ожидаем данные от сервера
</div>

З.Ы. Код не учитывает клики по кнопкам "Назад", "Далее", а так же нет проверок на превышение количества выдаваемых элементов количеству элементов в массиве.

Вывод данных представлен исключительно для наглядности и понимания

БЛОГ НА HUSL

Как использовать полученные данные от fetch без повторного обращения?

Ответы (1 шт):