Как сделать весь вывод одной функцией?

Question

Есть скрипт, который загружает массив из api и выводит информацию в виде товаров в магазине. Есть кнопки сортировки, на которых висит обработчик событий, выводящий отсортированный список.

Как сделать весь вывод одной функцией? Потому что один и тот же код повторяется 3 раза.

Код выглядит так:

const marketURL = "https://fakestoreapi.com/products";

let stuff = await fetch(marketURL);
stuff = await stuff.json();

marketPlace.innerHTML = stuff.map(item => `
         <div id="mainCard" class="card m-2 shadow p-3 mb-5 bg-white rounded">
            <img src="${item.image}" class="mx-auto card-img-top" title="${item.title}">
            <div class="card-body">
               <h5 class="card-title text-center">${item.title}</h5>
               <p class="card-text descript">${item.description}</p>
               <h4 class="text-end">$${item.price}</h4>
            </div>
         </div>
`).join("");

lowerP.addEventListener("click", function(){
    stuff.sort((a,b) => a.price > b.price ? 1 : -1);
    marketPlace.innerHTML = stuff.map(item => `
          <div id="mainCard" class="card m-2 shadow p-3 mb-5 bg-white rounded">
            <img src="${item.image}" class="mx-auto card-img-top" title="${item.title}">
            <div class="card-body">
             <h5 class="card-title text-center">${item.title}</h5>
             <p class="card-text descript">${item.description}</p>
             <h4 class="text-end">$${item.price}</h4>
            </div>
          </div>
`).join("");
});

higherP.addEventListener("click", function(){
    stuff.sort((a,b) => a.price < b.price ? 1 : -1);
    marketPlace.innerHTML = stuff.map(item => `
             <div id="mainCard" class="card m-2 shadow p-3 mb-5 bg-white rounded">
               <img src="${item.image}" class="mx-auto card-img-top" title="${item.title}">
               <div class="card-body">
                <h5 class="card-title text-center">${item.title}</h5>
                <p class="card-text descript">${item.description}</p>
                <h4 class="text-end">$${item.price}</h4>
               </div>  
            </div>
`).join("");
})

Answer 1

const marketURL = "https://fakestoreapi.com/products";

let stuff = await fetch(marketURL);
stuff = await stuff.json();

// Искомая функция
function printHtml() {
    marketPlace.innerHTML = stuff.map(item => `
         <div id="mainCard" class="card m-2 shadow p-3 mb-5 bg-white rounded">
            <img src="${item.image}" class="mx-auto card-img-top" title="${item.title}">
            <div class="card-body">
               <h5 class="card-title text-center">${item.title}</h5>
               <p class="card-text descript">${item.description}</p>
               <h4 class="text-end">$${item.price}</h4>
            </div>
         </div>
`).join("");
}
// Первый вывод
printHtml();

lowerP.addEventListener("click", function(){
    stuff.sort((a,b) => a.price > b.price ? 1 : -1);
    // Просто её вызываем
    printHtml();
});

higherP.addEventListener("click", function(){
    stuff.sort((a,b) => a.price < b.price ? 1 : -1);
    // Просто её вызываем
    printHtml();
})

БЛОГ НА HUSL

Как сделать весь вывод одной функцией?

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