0

Функция function send_url получает с сервера список продуктов, который далее используется в функции rendering_markets_cards, которая отрисовывает карточки с продуктами. Мне необходимо и далее работать с массивом products, для дальнейшего добавления продуктов в корзину. Проблема возникла с областью видимости массива products, а именно она существует только внутри своей функции.

async function send_url(url, store_id, category_id) {
    // функция отправляет на сервер store_id и canonical_url подкатегории с продуктами
    data = [url, store_id];
    let response = await fetch('http://127.0.0.1:8080/send_product_list', {
        method: 'POST', 
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        },
        body: JSON.stringify(data)
    })    
    .then(response => response.json()    
    .then(products => {
        rendering_markets_cards(products, category_id);
    })     
    );
}

function rendering_markets_cards(products, category_id) {
    // функция создает картточки с продуктами
    let div  = document.getElementById('products-' + category_id);

    products.forEach(product => {             
        let div_card = document.createElement('div');  
        let image = product.image_urls[0]        
        div_card.innerHTML = `
          <div class='card'>
            <img src="${image}" class='card-img-top'>
            <div class='card-body'>
              <h5 class='card-title'>${product.name}</h5>
              <p class='card-text'>${product.price} руб</p>
              <button type='button' class='btn btn-outline-primary' 
                data-id="${product.id}" 
                data-name="${product.name}" 
                data-price="${product.price}" 
                onclick='add_to_cart(this.dataset.id, this.dataset.name, this.dataset.price)'>
                    Добавить в корзину
              </button>
            </div>
          </div>`;
        div_card.setAttribute('id', product.legacy_product_id);
        div_card.setAttribute('class', 'col');
        div.appendChild(div_card);    
    })    
}

Когда пользователь на странице нажимает на карточке с товаром "Добавить в корзину" функции add_to_cart в качестве аргументов передается id, название продукта и его цена. Но я хочу иметь возможность отображать в корзине больше информации о товаре. Это можно сделать путем увеличения количества аргументов функции и дополнительной информацией, но я хочу в функции add_to_cart передавать только один аргумент - id, по которому я смогу найти объект в массиве products. Как мне сделать область видимости для массива product таким, чтобы я мог вызывать эту переменную не только в функции rendering_markets_cards?

1 ответ 1

1

У вас небольшой хаос. Вы и используете async/await, который работает с промисами и одновременно используете then. Зачем - непонятно.

В самом простом случае работа с fetch в async функции выглядит так:

async function fetchProducts() {
  const response = await fetch('/products');
  const data = await response.json();      
  // rendering_markets_cards(data.products, data.category_id);
}

Далее чуть облегчаем работу: products выносим за функцию, а в функции при получении заносим результат:

let products = [];

async function fetchProducts() {
  const response = await fetch('/products');
  const data = await response.json();
  products = data.products;
}

Но, важная часть (!!!), т.к. операция асинхронная, то важно получить все данные, а только потом начать пользователю с ними взаимодействовать. Поэтому ДО ЗАПРОСА вешаем на окно лоадер в модальном окне с надписью "загружаются данные". А ПОСЛЕ ПОЛУЧЕНИЯ удаляем модальное окно с лоадером. Всё. Теперь можно и спокойно отдать данные в другую функцию и работать ещё где-либо с ними

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.