使用 fetch 对数据进行排序

Answer 1

使用fetch api的排序和搜索方法

let productContainer = document.querySelector('.product-container')
let arr_1 = [];
let arr_2 = [];
let search = document.querySelector('#search')
let sortBtn = document.querySelector(".sort");
function getDataJson() {
    fetch(`http://localhost:3000/services`)
        .then(response => response.json())
        .then(data => {
            arr_2 = data;
            productContainer.innerHTML = "";
            arr_1 = arr_1.length || search.value ? arr_1 : data;
            arr_1.forEach(element => {
                productContainer.innerHTML += `
            <div class="product-boxs">

            <div class="product-image"><img src="${element.images}" alt=""></div>
            <h2>${element.title}</h2>
            <h2>${element.price}</h2>
            <div class="product-icons">
                        <span>5<i class="fa-solid fa-star"></i></span>
                        <span>5<i class="fa-solid fa-heart"></i></span>
            </div>
            <p>${element.description}</p>
            <div class="product-btn">
            <button class="card">Card</button>
            <button class="details" ><a href="details.html?id=${element.id}">View</a></button>
            </div>

            </div>
            `

            });
        })



}
getDataJson()
search.addEventListener("input", (e) => {
    arr_1 = arr_2;
    arr_1 = arr_1.filter((el) => {
        return el.title.toLowerCase().includes(e.target.value.toLowerCase())
    });
    getDataJson();
})
sortBtn.addEventListener("change", function (e) {
    if (e.target.value === "za") {
        arr_1.sort((a, b) => b.price - a.price);
    } else if (e.target.value === "az") {
        arr_1.sort((a, b) => a.price - b.price);
    } else {
        arr_1 = []

    }
    getDataJson(); // Update the displayed data after sorting.
});

Answer 2

1. 为按钮添加点击监听器。
2. 获取数据，并将其存储在变量中。
3. 显示数据。最简单的方法是使用

   .innerHTML

   ，但您也可以学习如何使用

   .appendChild

   。
4. 要对列表进行排序，请使用

   .localeCompare

   。

let wineList;

document.getElementById('sort_by_name').addEventListener('click', sortList);  // 1

fetch(`https://api.sampleapis.com/wines/reds`)
.then(response => response.json())
.then(data => {
  if (data) {
    wineList = data;     // 2
    display(wineList);   // 3
  }
})

function display(list) { // 3
  const wineDataEl = document.getElementById('wine_data');
  let htmlStr = '';
  
  for (const wine of list) {
    htmlStr += wine.wine + '<br/>';
  }
  
  wineDataEl.innerHTML = htmlStr;
}

function sortList() {    // 4
  if (wineList) {
    wineList.sort((a, b) => a.wine.localeCompare(b.wine)) ;
    display(wineList);   // 3
  }
}

<button id="sort_by_name">Sort</button>

<div id="wine_data">Loading...</div>